Menu (Dropdown)
Menus offer an easy way to build custom, accessible dropdown components with robust support for keyboard navigation.
To get started, install Headless UI via npm:
npm install @headlessui/react
Menu Buttons are built using the Menu
, Menu.Button
, Menu.Items
, and Menu.Item
components.
The Menu.Button
will automatically open/close the Menu.Items
when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( <Menu> <Menu.Button>More</Menu.Button> <Menu.Items> <Menu.Item> {({ active }) => ( <a className={`${active && 'bg-blue-500'}`} href="/account-settings" > Account settings </a> )} </Menu.Item> <Menu.Item> {({ active }) => ( <a className={`${active && 'bg-blue-500'}`} href="/account-settings" > Documentation </a> )} </Menu.Item> <Menu.Item disabled> <span className="opacity-75">Invite a friend (coming soon!)</span> </Menu.Item> </Menu.Items> </Menu> ) }
This is a headless component so there are no styles included by default. Instead, the components expose useful information via render props that you can use to apply the styles you'd like to apply yourself.
To style the active Menu.Item
you can read the active
render prop argument, which tells you whether or not that menu item is currently focused via the mouse or keyboard.
You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( <Menu> <Menu.Button>More</Menu.Button> <Menu.Items> {/* Use the `active` render prop to conditionally style the active item. */} <Menu.Item>
{({ active }) => (<a className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`} href="/account-settings" > Account settings </a> )} </Menu.Item> {/* ... */} </Menu.Items> </Menu> ) }
By default, your Menu.Items
instance will be shown/hidden automatically based on the internal open
state tracked within the Menu
component itself.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( <Menu> <Menu.Button>More</Menu.Button> {/* By default, this will automatically show/hide when the Menu.Button is pressed. */} <Menu.Items> <Menu.Item>{/* ... */}</Menu.Item> {/* ... */} </Menu.Items> </Menu> ) }
If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a static
prop to the Menu.Items
instance to tell it to always render, and inspect the open
slot prop provided by the Menu
to control which element is shown/hidden yourself.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( <Menu>
{({ open }) => (<> <Menu.Button>More</Menu.Button>{open && (<div> {/* Using `static`, `Menu.Items` is always rendered and ignores the `open` state. */}<Menu.Items static><Menu.Item>{/* ... */}</Menu.Item> {/* ... */} </Menu.Items> </div> )} </> )} </Menu> ) }
Use the disabled
prop to disable a Menu.Item
. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( <Menu> <Menu.Button>More</Menu.Button> <Menu.Items> {/* ... */} {/* This item will be skipped by keyboard navigation. */}
<Menu.Item disabled><span className="opacity-75">Invite a friend (coming soon!)</span> </Menu.Item> {/* ... */} </Menu.Items> </Menu> ) }
To animate the opening/closing of the menu panel, use the provided Transition
component. All you need to do is wrap the Menu.Items
in a <Transition>
, and the transition will be applied automatically.
import { Menu, Transition } from '@headlessui/react' function MyDropdown() { return ( <Menu> <Menu.Button>More</Menu.Button> {/* Use the Transition component. */}
<Transitionenter="transition duration-100 ease-out"enterFrom="transform scale-95 opacity-0"enterTo="transform scale-100 opacity-100"leave="transition duration-75 ease-out"leaveFrom="transform scale-100 opacity-100"leaveTo="transform scale-95 opacity-0"><Menu.Items> <Menu.Item>{/* ... */}</Menu.Item> {/* ... */} </Menu.Items></Transition></Menu> ) }
By default our built-in Transition
component automatically communicates with
the Menu
components to handle the open/closed states. However, if you require
more control over this behavior, you can explicitly control it:
import { Menu, Transition } from '@headlessui/react' function MyDropdown() { return ( <Menu>
{({ open }) => (<><Menu.Button>More</Menu.Button> {/* Use the Transition component. */} <Transitionshow={open}enter="transition duration-100 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-75 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > {/* Mark this component as `static` */}<Menu.Items static><Menu.Item>{/* ... */}</Menu.Item> {/* ... */} </Menu.Items> </Transition></>)}</Menu> ) }
Because they're renderless, Headless UI components also compose well with other animation libraries in the React ecosystem like Framer Motion and React Spring.
The accessibility semantics of role="menu"
are fairly strict and any children of a Menu
that are not Menu.Item
components will be automatically hidden from assistive technology to make sure the menu works the way screen reader users expect.
For this reason, rendering any children other than Menu.Item
components is discouraged as that content will be inaccessible to people using assistive technology.
If you want to build a dropdown with more flexible content, consider using Popover instead.
By default, the Menu
and its subcomponents each render a default element that is sensible for that component.
For example, Menu.Button
renders a button
by default, and Menu.Items
renders a div
. By contrast, Menu
and Menu.Item
do not render an
element, and instead render their children directly by default.
This is easy to change using the as
prop, which exists on every component.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( /* Render a `div` instead of no wrapper element */
<Menu as="div"><Menu.Button>More</Menu.Button> {/* Render a `section` instead of a `div` */}<Menu.Items as="section"><Menu.Item> {({ active }) => ( <a className={`${active && 'bg-blue-500'}`} href="/account-settings" > Account settings </a> )} </Menu.Item> {/* ... */} </Menu.Items> </Menu> ) }
To tell an element to render its children directly with no wrapper element, use as={React.Fragment}
.
import { Menu } from '@headlessui/react' function MyDropdown() { return ( <Menu> {/* Render no wrapper, instead pass in a button manually. */}
<Menu.Button as={React.Fragment}><button>More</button> </Menu.Button> <Menu.Items> <Menu.Item> {({ active }) => ( <a className={`${active && 'bg-blue-500'}`} href="/account-settings" > Account settings </a> )} </Menu.Item> {/* ... */} </Menu.Items> </Menu> ) }
This is important if you are using an interactive element like an <a>
tag inside the Menu.Item
. If the Menu.Item
had an as="div"
, then the props provided by Headless UI would be forwarded to the div
instead of the a
, which means that you can't go to the URL provided by the <a>
tag anymore via your keyboard.
The Next.js Link
component does not forward unknown props to the underlying a
element, so it won't close the menu on click when used inside a Menu.Item
.
To use a Next.js Link
inside a Menu.Item
, create your own component that wraps Link
and forwards unknown props to the child a
element.
import { forwardRef } from 'react'import Link from 'next/link'import { Menu } from '@headlessui/react'const MyLink = forwardRef((props, ref) => {let { href, children, ...rest } = propsreturn (<Link href={href}><a ref={ref} {...rest}>{children}</a></Link>)})function Example() { return ( <Menu> <Menu.Button>More</Menu.Button> <Menu.Items> <Menu.Item><MyLink href="/profile">Profile</MyLink></Menu.Item> </Menu.Items> </Menu> ) }
This will ensure that all of event listeners Headless UI needs to add to the a
element are properly applied.
Clicking the Menu.Button
toggles the menu and focuses the Menu.Items
component. Focus is trapped within the open menu until Escape is pressed or the user clicks outside the menu. Closing the menu returns focus to the Menu.Button
.
Clicking a Menu.Button
toggles the menu. Clicking anywhere outside of an open menu will close that menu.
Command | Description |
Enter or Space when | Opens menu and focuses first non-disabled item |
ArrowDown or ArrowUp when | Opens menu and focuses first/last non-disabled item |
Esc when menu is open | Closes any open Menus |
ArrowDown or ArrowUp when menu is open | Focuses previous/next non-disabled item |
Home or End when menu is open | Focuses first/last non-disabled item |
Enter or Space when menu is open | Activates/clicks the current menu item |
A–Z or a–z when menu is open | Focuses first item that matches keyboard input |
All relevant ARIA attributes are automatically managed.
For a full reference on all accessibility features implemented in Menu
, see the ARIA spec on Menu Buttons.
Menus are best for UI elements that resemble things like the menus you'd find in the title bar of most operating systems. They have specific accessibility semantics, and their content should be restricted to a list of links or buttons. Focus is trapped in an open menu, so you cannot Tab through the content or away from the menu. Instead, the arrow keys navigate through a Menu's items.
Here's when you might use other similar components from Headless UI:
<Popover />
. Popovers are general-purpose floating menus. They appear near the button that triggers them, and you can put arbitrary markup in them like images or non-clickable content. The Tab key navigates the contents of a Popover like it would any other normal markup. They're great for building header nav items with expandable content and flyout panels.<Disclosure />
. Disclosures are useful for elements that expand to reveal additional information, like a toggleable FAQ section. They are typically rendered inline and reflow the document when they're shown or hidden.<Dialog />
. Dialogs are meant to grab the user's full attention. They typically render a floating panel in the center of the screen, and use a backdrop to dim the rest of the application's contents. They also capture focus and prevent tabbing away from the Dialog's contents until the Dialog is dismissed.
Prop | Default | Description |
as | Fragment | String | Component The element or component the |
Render Prop | Description |
open |
Whether or not the Menu is open. |
Prop | Default | Description |
as | button | String | Component The element or component the |
Render Prop | Description |
open |
Whether or not the Menu is open. |
Prop | Default | Description |
as | div | String | Component The element or component the |
static | false | Boolean Whether the element should ignore the internally managed open/closed state. Note: |
unmount | true | Boolean Whether the element should be unmounted or hidden based on the open/closed state. Note: |
Render Prop | Description |
open |
Whether or not the Menu is open. |
Prop | Default | Description |
as | Fragment | String | Component The element or component the |
disabled | false | Boolean Whether or not the item should be disabled for keyboard navigation and ARIA purposes. |
Render Prop | Description |
active |
Whether or not the item is the active/focused item in the list. |
disabled |
Whether or not the item is the disabled for keyboard navigation and ARIA purposes. |
If you're interested in predesigned component examples using Headless UI and Tailwind CSS, check out Tailwind UI — a collection of beautifully designed and expertly crafted components built by us.
It's a great way to support our work on open-source projects like this and makes it possible for us to improve them and keep them well-maintained.