Menus

MenuItem

One action in a Menu: onClick runs it, href makes it a link, shortcut shows its keys and tone="destructive" marks an action that cannot be undone.

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

Example

<MenuItem onClick={edit} shortcut={["mod", "e"]}>Edit</MenuItem>
<MenuItem href="/recipes/1/print">Print</MenuItem>
<MenuItem tone="destructive" onClick={remove}>Delete</MenuItem>

Use instead when

Use MenuCheckboxItem instead for an on/off setting, and MenuRadioItem for one choice of several.

Props

Type: MenuItemProps.

children (required): Type: ReactNode; The item's text, or text with an icon.
current: Type: boolean; Marks a link item as the page being shown (aria-current="page", a medium-weight label with a bar at the start edge, which the highlight does not have), for a menu of pages. It does nothing on an item without href.
disabled: Type: boolean; Shown, but cannot be chosen.
href: Type: string; Makes the item a link: an internal path goes through OuroProvider's router link, an absolute URL is a plain <a>. The menu closes when it is followed.
onClick: Type: ((event: MouseEvent<HTMLElement>) => void); Runs when the item is chosen, by click, tap or Enter. The menu then closes.
shortcut: Type: MenuShortcut; The item's keyboard shortcut, as Kbd shows it: ["mod", "e"] is ⌘E on Apple platforms and Ctrl+E elsewhere. It only shows the keys; bind them in your app.
tone: Type: "destructive"; "destructive" for an action that deletes or cannot be undone.

Prop	Type	Description
`children` (required)	`ReactNode`	The item's text, or text with an icon.
`current`	`boolean`	Marks a link item as the page being shown (`aria-current="page"`, a medium-weight label with a bar at the start edge, which the highlight does not have), for a menu of pages. It does nothing on an item without `href`.
`disabled`	`boolean`	Shown, but cannot be chosen.
`href`	`string`	Makes the item a link: an internal path goes through `OuroProvider`'s router link, an absolute URL is a plain `<a>`. The menu closes when it is followed.
`onClick`	`((event: MouseEvent<HTMLElement>) => void)`	Runs when the item is chosen, by click, tap or Enter. The menu then closes.
`shortcut`	`MenuShortcut`	The item's keyboard shortcut, as `Kbd` shows it: `["mod", "e"]` is ⌘E on Apple platforms and Ctrl+E elsewhere. It only shows the keys; bind them in your app.
`tone`	`"destructive"`	`"destructive"` for an action that deletes or cannot be undone.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

asChild: Not a prop. For a link, pass href: <MenuItem href="/recipes/1">.
checked: Not a prop. A checkable item is a MenuCheckboxItem: <MenuCheckboxItem checked={pinned} onCheckedChange={setPinned}>.
onSelect: Not a prop. The handler is onClick: <MenuItem onClick={edit}>. (A Command item is the one that takes onSelect.)
variant: Not a prop. A menu item takes tone: <MenuItem tone="destructive">.

Types

`MenuShortcut`

Keys for a shortcut, as Kbd takes them: ["mod", "e"] shows ⌘E on Apple platforms and Ctrl+E elsewhere.

type MenuShortcut = readonly string[] | (string & { 'Use an array: shortcut={["mod", "k"]}': never });

Source on GitHub This page as Markdown