I am working on a project and I need a sample code of dropdown menu using tailwind CSS and Next.js. If anyone could help me I would greatly appreciate it.
2 Answers
The developers of tailwindcss actually create fully unstyled UI components, check it out here: https://headlessui.dev/
-
hi, could you help me? i've install headlessui, but many things dont work properly. do i have to install tailwindcss? Jul 7, 2022 at 23:28
-
Yes, I would reccomend installing tailwindcss. Also, remember that headless UI is unstyled– quick007Jul 12, 2022 at 21:26
Check out this code, you will like it....
const [dropdownOpen, setdropdownOpen] = useState(false);
////// jsx ///////
<div
onClick={() => setdropdownOpen(!dropdownOpen)}
class="overflow-hidden rounded-full w-8 h-8 flex justify-center items-center
hover:cursor-pointer
">
Toggle
</div>
<div
class={`${dropdownOpen ? `top-full opacity-100 visible` : 'top-[110%] invisible opacity-0'} absolute left-0 z-40 mt-2 w-full rounded border-[.5px] border-light bg-white py-5 shadow-card transition-all`}>
<a
href="javascript:void(0)"
class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
>
Dashboard
</a>
<a
href="javascript:void(0)"
class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
>
Settings
</a>
<a
href="javascript:void(0)"
class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
>
Earnings
</a>
<a
href="javascript:void(0)"
class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
>
Logout
</a>
</div>
https://headlessui.dev/
Tailwinds official react components, you will find dropdown menu example/code.