Noob Question: How would one add a proper dropdown to the NavBar?
Hello and sorry for this very basic question: I've tried implementing what was on headlessui's Dropdown page (https://headlessui.com/react/menu) but I didn't manage to get it working properly (functions ok but styling is way way off and worse on mobile). I've reverted the code in hopes I'll find some more references before trying again.
Is there any snippet of code for an example dropdown that retains the same style as the other buttons? Just 2 example buttons under a menu. (I'm mostly talking about SaaS template). Thank you!
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
3 Replies
Hey as you reference headless ui I assume you use tailwind. There are a lot of same/similar elements in the wild (because you know it's tailwind 😅 )
Here I have this ui library saved that you can use without installing it , You can use it as reference or copy and paste
https://preline.co/docs/dropdown.html
Preline
Tailwind CSS Dropdown | Preline UI, crafted with Tailwind CSS
A dropdown menu displays a list of actions and more with JavaScript dropdown plugin.
There are more examples
https://flowbite.com/docs/components/dropdowns/
https://www.hyperui.dev/components/application-ui/dropdown
Tailwind CSS Dropdown - Flowbite
Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
thank you!