Submenu

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

Menu Dropdowns Abstracted examples

Edit example

12345678910111213141516171819202122
import "./style.css";
import { Menu, MenuItem } from "./menu.tsx";

export default function Example() {
  return (
    <Menu label="Edit">
      <MenuItem>Undo</MenuItem>
      <MenuItem>Redo</MenuItem>
      <Menu label="Find">
        <MenuItem>Search the Web...</MenuItem>
        <MenuItem>Find...</MenuItem>
        <MenuItem>Find Next</MenuItem>
        <MenuItem>Find Previous</MenuItem>
      </Menu>
      <Menu label="Speech">
        <MenuItem>Start Speaking</MenuItem>
        <MenuItem disabled>Stop Speaking</MenuItem>
      </Menu>
    </Menu>
  );
}

import "./style.css";
import { Menu, MenuItem } from "./menu.tsx";

export default function Example() {
  return (
    <Menu label="Edit">
      <MenuItem>Undo</MenuItem>
      <MenuItem>Redo</MenuItem>
      <Menu label="Find">
        <MenuItem>Search the Web...</MenuItem>
        <MenuItem>Find...</MenuItem>
        <MenuItem>Find Next</MenuItem>
        <MenuItem>Find Previous</MenuItem>
      </Menu>
      <Menu label="Speech">
        <MenuItem>Start Speaking</MenuItem>
        <MenuItem disabled>Stop Speaking</MenuItem>
      </Menu>
    </Menu>
  );
}

Components

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.

View all components

In this example, we created a higher-level abstraction of the Menu component that automatically renders a MenuButton as a MenuItem if there's a parent menu store. This way, you can easily copy and paste it into your project.

However, in practice, creating submenus with Ariakit is as straightforward as nesting Menu components and merging MenuButton and MenuItem into a single element using the render prop:

<MenuProvider>
  <MenuButton>Edit</MenuButton>
  <Menu>
    <MenuItem>Undo</MenuItem>
    <MenuItem>Redo</MenuItem>
    <MenuProvider>
      <MenuItem render={<MenuButton />}>Find</MenuItem>
      <Menu>
        <MenuItem>Find Next</MenuItem>
        <MenuItem>Find Previous</MenuItem>
      </Menu>
    </MenuProvider>
  </Menu>
</MenuProvider>
<MenuProvider>
  <MenuButton>Edit</MenuButton>
  <Menu>
    <MenuItem>Undo</MenuItem>
    <MenuItem>Redo</MenuItem>
    <MenuProvider>
      <MenuItem render={<MenuButton />}>Find</MenuItem>
      <Menu>
        <MenuItem>Find Next</MenuItem>
        <MenuItem>Find Previous</MenuItem>
      </Menu>
    </MenuProvider>
  </Menu>
</MenuProvider>

Related examples

Submenu with ComboboxNesting Notion-style dropdown menus with search & autocomplete features by combining Menu with Combobox.

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

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.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

View all examples

Submenu

Components

Anatomy of nested menus

Stay tuned