12345678910111213141516171819202122232425
import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <Ariakit.MenuProvider>
      <Ariakit.MenuButton className="button">
        Actions
        <Ariakit.MenuButtonArrow />
      </Ariakit.MenuButton>
      <Ariakit.Menu gutter={8} className="menu">
        <Ariakit.MenuItem className="menu-item" onClick={() => alert("Edit")}>
          Edit
        </Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item">Share</Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item" disabled>
          Delete
        </Ariakit.MenuItem>
        <Ariakit.MenuSeparator className="separator" />
        <Ariakit.MenuItem className="menu-item">Report</Ariakit.MenuItem>
      </Ariakit.Menu>
    </Ariakit.MenuProvider>
  );
}

import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <Ariakit.MenuProvider>
      <Ariakit.MenuButton className="button">
        Actions
        <Ariakit.MenuButtonArrow />
      </Ariakit.MenuButton>
      <Ariakit.Menu gutter={8} className="menu">
        <Ariakit.MenuItem className="menu-item" onClick={() => alert("Edit")}>
          Edit
        </Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item">Share</Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item" disabled>
          Delete
        </Ariakit.MenuItem>
        <Ariakit.MenuSeparator className="separator" />
        <Ariakit.MenuItem className="menu-item">Report</Ariakit.MenuItem>
      </Ariakit.Menu>
    </Ariakit.MenuProvider>
  );
}

Examples

SubmenuRendering nested Menu components to create a dropdown menu with submenus that open when hovering over the parent menu item.

MenuItemCheckboxRendering a dropdown Menu using the MenuItemCheckbox component with the values and setValues props from MenuProvider to control the checked items.

Menu with Framer MotionAbstracting Menu into a reusable dropdown menu component that uses Framer Motion to create smooth initial and exit animations.

Menu with TooltipRendering Menu with a Tooltip that appears when hovering over the MenuButton component by combining it with the TooltipAnchor component.

View all Menu examples

API

useMenuStore()
useMenuContext()

<MenuProvider>
  <MenuButton>
    <MenuButtonArrow />
  </MenuButton>
  <MenuList />
  <Menu>
    <MenuArrow />
    <MenuHeading />
    <MenuDescription />
    <MenuDismiss />
    <MenuGroup>
      <MenuGroupLabel />
      <MenuItem />
      <MenuItemCheckbox>
        <MenuItemCheck />
      </MenuItemCheckbox>
      <MenuItemRadio>
        <MenuItemCheck />
      </MenuItemRadio>
      <MenuSeparator />
    </MenuGroup>
  </Menu>
</MenuProvider>
useMenuStore()
useMenuContext()

<MenuProvider>
  <MenuButton>
    <MenuButtonArrow />
  </MenuButton>
  <MenuList />
  <Menu>
    <MenuArrow />
    <MenuHeading />
    <MenuDescription />
    <MenuDismiss />
    <MenuGroup>
      <MenuGroupLabel />
      <MenuItem />
      <MenuItemCheckbox>
        <MenuItemCheck />
      </MenuItemCheckbox>
      <MenuItemRadio>
        <MenuItemCheck />
      </MenuItemRadio>
      <MenuSeparator />
    </MenuGroup>
  </Menu>
</MenuProvider>

When browsing the list with a keyboard (or hovering over items with the mouse when the focusOnHover prop is true), the active item element will have a data-active-item attribute. You can use this attribute to style the active item:

.menu-item[data-active-item] {
  background-color: hsl(204 100% 40%);
  color: white;
}
.menu-item[data-active-item] {
  background-color: hsl(204 100% 40%);
  color: white;
}

Learn more on the Styling guide.

Should I use Menu or Select?

Because they behave similarly, it may not be obvious when to use Menu and when to use Select. Here are some guidelines to help you decide:

Use Select when the purpose is to select a value from a list of options. For example, a dropdown to select a country from a list of countries.
Use Menu when the purpose is to access a set of commands, actions, links, or settings. For example, a dropdown to access a set of commands to edit a document or a list of settings to configure part of an application.

Like the native <select> element, the Select button's text reflects the selected option (the value). The button should also have a label alongside the value, even if it's visually hidden. When the SelectPopover opens, the selected item will be focused and brought into view. If your design requires these features, use Select.

On the other hand, MenuButton can only display a label, not hold a value. The label is usually a static call to action. Opening the Menu won't automatically focus on a checked MenuItemCheckbox or MenuItemRadio, which are commonly used for settings.

Related components

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

CheckboxSelect one or more options in a list or toggle a single option using a native or custom checkbox in React. This component is based on the WAI-ARIA Checkbox Pattern.

MenubarRender a visually persistent menu similar to those found near the top of the window in desktop apps. This component is based on the WAI-ARIA Menubar Pattern.

PopoverShow a popup dialog positioned relative to an anchor element. This component can be either modal or non-modal and optionally rendered in a React portal.

RadioChoose one option from a list of choices presented as radio buttons. This component is based on the WAI-ARIA Radio Group Pattern.

SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.

View all components

Menu

Examples

API

Styling

Styling the active item

Should I use Menu or Select?

Stay tuned