This site is under construction Subscribe to updates

Submenu

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

In the example below, we use the primitive Ariakit components to create custom reusable Menu and MenuItem components that are aware of their parent menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Menu, MenuItem } from "./menu";
import "./style.css";

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