Building a Tailwind CSS Dropdown Menu

Source: Dev.to

In this tutorial we’ll build a simple dropdown menu using Tailwind CSS. We are taking a no‑JavaScript approach inspired by DaisyUI so that it works in any project setup.

Prerequisites

Before starting, make sure you have Tailwind CSS set up in your project. If you need help, check out the Tailwind CSS installation guide.

Step 1: Create the trigger button

First, let’s create a simple button. This is what users will click to open the dropdown menu.

Dropdown

Optional: To make it easier to see what we’re building, add these styles to your CSS file to center everything on the page:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Step 2: Style the trigger button

Now let’s make it look like a proper button with borders, padding, and hover effects.

  Dropdown

Step 3: Create the menu

Next, we’ll add the actual menu with some links. We’ll also wrap the menu and trigger in a relative container so we can position the menu relative to the trigger later.

  Dropdown

  
    Item One
    Item Two
    Item Three
  

Step 4: Style and position the menu

Let’s style the menu and position it below the button.

  Dropdown

  
    Item One
    Item Two
    Item Three
  

Step 5: Style the menu items

Now we’ll give the menu items a consistent look.

  Dropdown

  
    
      Item One
    
    Item Two
    Item Three
  

All menu items use the same classes; only one example is shown for brevity.

Step 6: Make it interactive

We’ll hide the menu by default and reveal it when the button is focused (clicked). This is achieved with Tailwind’s group and focus-within utilities, which let any element inside a group change styles while any child element is focused.

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

(The ... placeholders represent the classes already defined in the previous steps.)

Final Result

When you put everything together, you get a fully functional, Tailwind‑only dropdown menu that opens on focus and closes when focus is lost.

Feel free to experiment with the classes to customize colors, spacing, or transition effects to match your design system. Happy coding!

Cleaned‑up Markdown

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

What’s happening?

• group on the wrapper enables group-* variants on child elements.
• opacity-0 makes the menu invisible.
• pointer-events-none prevents clicking on invisible items.
• transition-opacity adds a subtle fade animation.
• group-focus-within:opacity-100 shows the menu when the button is focused/clicked.
• group-focus-within:pointer-events-auto makes the menu clickable when visible.
• group-focus-within:pointer-events-none allows clicking the button again to close the menu.

Demo GIF

Complete code (copy‑paste)

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

Using Starting Point UI

If you want to save time, Starting Point UI offers many pre‑built components like dropdowns, with extra features such as keyboard navigation, better accessibility, and flexible positioning.

  Dropdown

  
    Item One
    Item Two
    Item Three
  

See more dropdown examples here.