Component library patterns (Headless UI) in Tailwind - Mini Project: Build & Apply

Build a Simple Dropdown Menu with Headless UI and Tailwind CSS

📖 Scenario: You want to create a dropdown menu for a website navigation bar. The dropdown should open when clicked and show a list of options. You will use Headless UI components with Tailwind CSS to build this accessible dropdown.

🎯 Goal: Build a functional dropdown menu using Headless UI's Menu component and style it with Tailwind CSS. The dropdown should open and close on click, and show three menu items.

📋 What You'll Learn

Use Headless UI's Menu component to create the dropdown

Use Tailwind CSS classes for styling the button and menu items

Include three menu items: Profile, Settings, and Logout

Make sure the dropdown toggles open and closed on button click

Use semantic HTML and accessible ARIA roles provided by Headless UI

💡 Why This Matters

🌍 Real World

Dropdown menus are common in websites for navigation, user settings, and actions. Using Headless UI helps build accessible and customizable dropdowns without worrying about ARIA roles or keyboard support.

💼 Career

Front-end developers often need to build interactive UI components that are accessible and visually consistent. Knowing how to use component libraries like Headless UI with Tailwind CSS is valuable for creating maintainable and user-friendly interfaces.

1

Set up the basic HTML structure with Tailwind CSS

Create a div container with the class relative inline-block text-left. Inside it, add a button with the text Options and the Tailwind classes inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50.

Tailwind

Need a hint?

Use a div with class relative inline-block text-left and add a button inside with the exact Tailwind classes and text Options.

2

Add Headless UI Menu component wrapper and import

Wrap the existing div with <Menu as="div" className="relative inline-block text-left"> from Headless UI. Also add the import statement import { Menu } from '@headlessui/react' at the top of your file.

Tailwind

import { Menu } from '@headlessui/react'


  
    Options
  

Need a hint?

Import Menu from @headlessui/react and replace the div with <Menu as="div">. Change the button to <Menu.Button> with the same classes and text.

3

Add the dropdown menu items using Menu.Items and Menu.Item

Below the <Menu.Button>, add <Menu.Items> with the classes absolute right-0 mt-2 w-56 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none. Inside it, add three <Menu.Item> elements each containing a <a> tag with the classes block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 and the texts Profile, Settings, and Logout respectively.

Tailwind

import { Menu } from '@headlessui/react'


  
    Options
  
  

Need a hint?

Use <Menu.Items> with the given classes below the button. Inside, add three <Menu.Item> elements each rendering an <a> tag with the specified classes and texts.

4

Add keyboard accessibility and focus styles

Modify the className of each <a> inside <Menu.Item> to use the active state from the render prop. Use a template string that applies bg-gray-100 and text-gray-900 classes when active is true, otherwise text-gray-700. This ensures keyboard focus styling.

Tailwind

import { Menu } from '@headlessui/react'


  
    Options
  
  
    
      {({ active }) => (
        
          Profile
        
      )}
    
    
  

Need a hint?

Use the active boolean from the render prop to conditionally add bg-gray-100 text-gray-900 classes when true, else text-gray-700. Use a template string for the className.