Pie Menu Nested Submenu

ProNew

A ring whose wedges can open a second, outer ring of choices, with keyboard and pointer navigation across both levels and Escape closing one level at a time. Use this when a radial menu has more actions than fit on one ring.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it for canvas and map tools with a few families of actions (shapes, then which shape), where two levels keep each ring small.

Do not use it when there are more than two levels or more than about eight entries per ring. Use a list-based menu.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`{ id, label, icon, children? }[]`	-	The first ring; `children` open the outer ring.
`onSelect`	`(path: string[]) => void`	-	Runs with the ids from the first ring down to the choice.
`label`	`string`	`Insert`	Button text and menu name.

Accessibility

Both rings are menus; a wedge that opens the outer ring has aria-haspopup="menu" and aria-expanded.
Enter opens the submenu and focuses its first item; Escape closes the outer ring and returns focus to its wedge, a second Escape closes the menu and returns focus to the button.
Arrow keys wrap around each ring; Tab closes the menu.
Shapes, 4 options is announced when a submenu opens.

Testing

The pattern ships with a Testing Library test (pie-menu-nested-submenu.test.tsx) that covers opening a submenu, choosing a path, Escape closing one level at a time and wrapping.

Guide and examples

When to use it

Use it for canvas and map tools with a few families of actions (shapes, then which shape), where two levels keep each ring small.

Do not use it when there are more than two levels or more than about eight entries per ring. Use a list-based menu.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`{ id, label, icon, children? }[]`	-	The first ring; `children` open the outer ring.
`onSelect`	`(path: string[]) => void`	-	Runs with the ids from the first ring down to the choice.
`label`	`string`	`Insert`	Button text and menu name.

Accessibility

Both rings are menus; a wedge that opens the outer ring has aria-haspopup="menu" and aria-expanded.
Enter opens the submenu and focuses its first item; Escape closes the outer ring and returns focus to its wedge, a second Escape closes the menu and returns focus to the button.
Arrow keys wrap around each ring; Tab closes the menu.
Shapes, 4 options is announced when a submenu opens.

Testing

The pattern ships with a Testing Library test (pie-menu-nested-submenu.test.tsx) that covers opening a submenu, choosing a path, Escape closing one level at a time and wrapping.