Navbar with Hovers Dropdown Using Tailwind
Creating a CSS only navbar with dropdowns on hover with tailwind
Have a new and improved approach to dropdown navigation:
Accessible Dropdown Navigation with Tailwind CSS and Alpine Js
Read that for a better menu.
Below is original post
I'm working on a new site and need a navbar with dropdown menus on hover. This is relatively simple using Tailwind CSS.
To begin you need to enable Group Hover in your tailwind config file. You do this by adding the group-hover variant to display in the variants section.
// tailwind.config.js
module.exports = {
// ...
variants: {
display: ['responsive', 'group-hover', 'group-focus'],
},
}
The navigation is then relative simple to set up. Note that this example doesn't yet have a responsive hamburger menu set up. It's just the dropdowns.
<nav aria-label="primary" class="relative z-20 flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
<div class="relative group">
<button class="flex flex-row items-center w-full px-4 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat">
<span>First Dropdown</span>
</button>
<div class="absolute z-10 hidden bg-grey-200 group-hover:block">
<div class="px-2 pt-2 pb-4 bg-white bg-gray-200 shadow-lg">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<p>
dropdown content here
</p>
</div>
</div>
</div>
</div>
<div class="relative group">
<button class="flex flex-row items-center w-full px-4 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat">
<span>Second Dropdown</span>
</button>
<div class="absolute z-10 hidden bg-grey-200 group-hover:block">
<div class="px-2 pt-2 pb-4 bg-white bg-gray-200 shadow-lg">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<p>
dropdown content here
</p>
</div>
</div>
</div>
</div>
</nav>
