---
title: Navbar with Hovers Dropdown Using Tailwind
date: 2020-06-19T10:46:00-04:00
author: cc_admin
canonical_url: "https://caffeinecreations.ca/blog/navbar-with-hovers-dropdown-using-tailwind/"
section: Blog
---
![Tailwind-hero](https://caffeinecreations.ca/uploads/blog/_1920x660_crop_center-center_none_ns/tailwind-hero2.jpg)

- [Code](https://caffeinecreations.ca/blog/category/code/), [Tutorial](https://caffeinecreations.ca/blog/category/code/tutorial/), [Accessibility](https://caffeinecreations.ca/blog/category/accessibility/)

# 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](https://caffeinecreations.ca/blog/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](https://tailwindcss.com/docs/pseudo-class-variants/#group-hover) in your tailwind config file. You do this by adding the `group-hover` variant to display in the variants section.

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="// tailwind.config.js
module.exports = {
  // ...
  variants: {
   display: ['responsive', 'group-hover', 'group-focus'],
  },
}" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```javascript

      // 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.

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="<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>" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```twig

      <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>
    
```
  
```

## More Articles

[![Accessible Dropdown Navigation with Tailwind CSS and Alpine Js Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/alpine-plus-tailwind.jpg)### Accessible Dropdown Navigation with Tailwind CSS and Alpine Js](https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/)

[![Grouping Entries by First Letter of Last Name Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/alphabet.jpg)### Grouping Entries by First Letter of Last Name](https://caffeinecreations.ca/blog/grouping-entries-by-first-letter-of-last-name/)

[![Responsive Tables with Craft CMS, Table Maker, and Tailwind Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/zebras-1.jpg)### Responsive Tables with Craft CMS, Table Maker, and Tailwind](https://caffeinecreations.ca/blog/responsive-tables-with-craft-cms-table-maker-and-tailwind/)