Ariakit
/

Components

Anatomy of nested menus

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:

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

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.