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

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
  

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
  
  

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
        
      )}
    
    
  

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.

Practice

1. What is the main purpose of Headless UI in web development?

easy

A. To create animations for UI elements automatically

B. To offer pre-styled UI components ready to use

C. To replace Tailwind CSS for styling

D. To provide accessible component behavior without styling

Solution

1. Step 1: Understand Headless UI's role

   Headless UI provides the logic and accessibility for components but no styles.

2. Step 2: Compare with styling tools

   Styling is added separately, often with Tailwind CSS, so Headless UI focuses on behavior only.

3. Final Answer:

   To provide accessible component behavior without styling -> Option D

4. Quick Check:

   Headless UI = behavior only [OK]

Hint: Headless UI = logic + accessibility, no styles [OK]

Common Mistakes:

• Thinking Headless UI provides styles
• Confusing Headless UI with Tailwind CSS
• Assuming it creates animations automatically

2. Which of the following is the correct way to import a Headless UI component in a React project?

easy

A. import { Menu } from '@headlessui/react';

B. import Menu from 'headless-ui';

C. import { Menu } from 'tailwindcss';

D. import Menu from '@headlessui/css';

Solution

1. Step 1: Identify the correct package name

   The official Headless UI React package is '@headlessui/react'.

2. Step 2: Use named import for components

   Components like Menu are imported as named imports from '@headlessui/react'.

3. Final Answer:

   import { Menu } from '@headlessui/react'; -> Option A

4. Quick Check:

   Correct import syntax = import { Menu } from '@headlessui/react'; [OK]

Hint: Headless UI React imports use named imports from '@headlessui/react' [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from 'tailwindcss' instead of '@headlessui/react'
• Using wrong package names like 'headless-ui' or '@headlessui/css'

3. Given this React code using Headless UI's Menu component, what will be the visible output when the button is clicked?

import { Menu } from '@headlessui/react';

export default function Example() {
  return (
    
      Options
      
        
          {({ active }) => (
            <a href='#' className={`${active ? 'bg-blue-500 text-white' : 'text-black'}`}>Account</a>
          )}
        
        
          {({ active }) => (
            <a href='#' className={`${active ? 'bg-blue-500 text-white' : 'text-black'}`}>Settings</a>
          )}
        
      
    
  );
}

medium

A. An error because Menu.Items is missing a wrapper element

B. A button labeled 'Options' that toggles a dropdown with 'Account' and 'Settings' links

C. A button labeled 'Options' with no dropdown appearing on click

D. Only a static list of 'Account' and 'Settings' links visible without a button

Solution

1. Step 1: Understand Menu component behavior

   The Menu.Button toggles visibility of Menu.Items as a dropdown.

2. Step 2: Check rendering of Menu.Items and Menu.Item

   Menu.Items contains two Menu.Item links that show with styling on hover (active).

3. Final Answer:

   A button labeled 'Options' that toggles a dropdown with 'Account' and 'Settings' links -> Option B

4. Quick Check:

   Menu.Button toggles dropdown = A button labeled 'Options' that toggles a dropdown with 'Account' and 'Settings' links [OK]

Hint: Menu.Button toggles Menu.Items dropdown visibility [OK]

Common Mistakes:

• Thinking dropdown is always visible
• Assuming Menu.Items needs extra wrapper
• Expecting error due to JSX structure

4. What is the main issue with this Headless UI Disclosure usage in React?

import { Disclosure } from '@headlessui/react';

export default function Example() {
  return (
    <Disclosure>
      <Disclosure.Button>Toggle</Disclosure.Button>
      <div>Hidden content</div>
    </Disclosure>
  );
}

medium

A. The hidden content should be wrapped in Disclosure.Panel for proper behavior

B. Disclosure.Button must be outside Disclosure component

C. The import statement is incorrect

D. Disclosure requires a state hook to work

Solution

1. Step 1: Check Disclosure structure

   Disclosure requires hidden content inside Disclosure.Panel for toggle functionality.

2. Step 2: Identify missing wrapper

   The <div>Hidden content</div> should be replaced with <Disclosure.Panel>Hidden content</Disclosure.Panel>.

3. Final Answer:

   The hidden content should be wrapped in Disclosure.Panel for proper behavior -> Option A

4. Quick Check:

   Disclosure.Panel wraps hidden content [OK]

Hint: Hidden content must be inside Disclosure.Panel [OK]

Common Mistakes:

• Placing hidden content directly without Disclosure.Panel
• Moving Disclosure.Button outside Disclosure
• Incorrect import or missing hooks

5. You want to create a custom dropdown menu using Headless UI's Menu component styled with Tailwind CSS. You want the menu items to close the menu when clicked and highlight on keyboard navigation. Which approach correctly combines Headless UI behavior with Tailwind styling?

hard

A. Use Menu.Button and style it only; menu items are plain HTML links without Headless UI components

B. Use Menu.Items without Menu.Button and add Tailwind hover classes manually

C. Use Menu.Button to toggle, wrap items in Menu.Items, and style Menu.Item using the active state with Tailwind classes

D. Use only Tailwind CSS dropdown utilities without Headless UI components

Solution

1. Step 1: Use Headless UI components for behavior

   Menu.Button toggles menu visibility; Menu.Items contains menu options; Menu.Item handles keyboard navigation and active state.

2. Step 2: Apply Tailwind CSS for styling active states

   Use the active render prop in Menu.Item to conditionally apply Tailwind classes for highlight on keyboard focus or hover.

3. Step 3: Ensure menu closes on item click

   Headless UI automatically closes the menu when a Menu.Item is clicked, preserving accessibility.

4. Final Answer:

   Use Menu.Button to toggle, wrap items in Menu.Items, and style Menu.Item using the active state with Tailwind classes -> Option C

5. Quick Check:

   Headless UI + Tailwind styling = Use Menu.Button to toggle, wrap items in Menu.Items, and style Menu.Item using the active state with Tailwind classes [OK]

Hint: Style Menu.Item active state with Tailwind inside Headless UI Menu [OK]

Common Mistakes:

• Styling only Menu.Button and ignoring Menu.Item active states
• Not using Menu.Item components for menu options
• Trying to build dropdown without Menu.Button