← Back to Docs

Dropdown Menu

A keyboard-navigable, ARIA-compliant dropdown menu built with native HTML and Tailwind. No JavaScript required for basic interaction.

Preview

Usage

<div className="relative group">
  <button aria-haspopup="true" aria-expanded="false">
    Options
  </button>
  <ul role="menu" className="absolute ... group-focus-within:opacity-100">
    <li role="menuitem" tabIndex={0}>Profile</li>
    <li role="menuitem" tabIndex={0}>Settings</li>
    <li role="menuitem" tabIndex={0}>Sign out</li>
  </ul>
</div>

Accessibility

  • aria-haspopupIndicates a popup menu is available.
  • aria-expandedCommunicates open/closed state to screen readers.
  • role="menu"Identifies the container as a menu widget.
  • role="menuitem"Each option is announced as a menu item.
  • tabIndex={0}Enables keyboard focus on individual items.

Keyboard

The menu opens on focus via group-focus-within. Users can Tab through items and press Enter orSpace to activate.