Dropdown Menu - Next.js & Tailwind CSS

Question

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.

Look in to ```https://headlessui.dev/``` Tailwinds official react components, you will find dropdown menu example/code. — Dipankar Maikap, Jun 02 '21 at 19:19

score 14 · Accepted Answer · answered Jun 04 '21 at 04:23

14

The developers of tailwindcss actually create fully unstyled UI components, check it out here: https://headlessui.dev/

answered Jun 04 '21 at 04:23

quick007

326
4
12

hi, could you help me? i've install headlessui, but many things dont work properly. do i have to install tailwindcss? – glushkina1 Jul 07 '22 at 23:28
Yes, I would reccomend installing tailwindcss. Also, remember that headless UI is unstyled – quick007 Jul 12 '22 at 21:26

score 0 · Answer 2 · answered Jun 07 '22 at 09:39

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>

Dropdown Menu - Next.js & Tailwind CSS

2 Answers2