Menus

MenuSub

A nested menu in a Menu: an item that opens more items beside it, on hover, click or the arrow key. On a phone it is a sheet over its menu, with a Back item at its top.

import { MenuSub } from "@/components/ouro/menu/menu";

Example

<MenuSub label="Share">
  <MenuItem onClick={copyLink}>Copy link</MenuItem>
  <MenuItem href={mailto}>Email</MenuItem>
</MenuSub>

Use instead when

Use MenuGroup instead when the items fit in the menu under a label: nested menus are harder to reach.

Props

Type: MenuSubProps.

backLabel: Type: string; Default: "Back"; The label of the item at the top of the submenu on a phone, where the submenu is a sheet over its menu, that goes back to it.
children (required): Type: ReactNode; The submenu's items.
disabled: Type: boolean; The item cannot open the submenu.
label (required): Type: string; The text of the item that opens the submenu.

Prop	Type	Default	Description
`backLabel`	`string`	`"Back"`	The label of the item at the top of the submenu on a phone, where the submenu is a sheet over its menu, that goes back to it.
`children` (required)	`ReactNode`		The submenu's items.
`disabled`	`boolean`		The item cannot open the submenu.
`label` (required)	`string`		The text of the item that opens the submenu.

Source on GitHub This page as Markdown