Menu Item

A single option inside a Dropdown Menu or similar list.

import { MenuItem } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { MenuItem } from '@basiiik/ui';

<MenuItem>Rename</MenuItem>

Exported next to DropdownMenu. Hover and Focused are the same highlight (hover moves focus); Selected is selected (a checkable menuitemcheckbox); Disabled is disabled (aria-disabled, skipped by arrow keys); Destructive is destructive.
Storybook: Overlays/Dropdown Menu.

Props

Prop	Type	Notes
`destructive`	`boolean`
`children`	`ReactNode`
`shortcut`	`string`
`icon`	`ReactNode`
`selected`	`boolean`
`disabled`	`boolean`

Other props

Prop	Type	What it does
`onSelect`	`() => void`	Called when chosen with a click, Enter or Space.
`keepOpen`	`boolean`	Keep the menu open after choosing (default false).

States. Exported next to DropdownMenu. Hover and Focused are the same highlight (hover moves focus); Selected is selected (a checkable menuitemcheckbox); Disabled is disabled (aria-disabled, skipped by arrow keys); Destructive is destructive.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Options inside a Dropdown Menu

Do not use it when

Standalone navigation (use Sidebar Item or Link)

Rules for agents

Use MenuItem only inside a DropdownMenu
Run the action in onSelect; the menu closes afterwards unless keepOpen is set
destructive items go last, after a MenuSeparator
selected turns the item into a checkable option; keep the label the same in both states

Avoid

Navigation links styled as MenuItems for a whole site (use Navbar or Sidebar Item)
Putting other controls such as inputs or switches inside a MenuItem
Disabling items without explaining why the action is unavailable elsewhere

Writing the content

Start with a verb: "Rename", "Delete"
Add an ellipsis when the item asks for more input
Use sentence case

Keyboard

Arrow keys move
Enter or Space selects
Type-ahead

Accessibility

aria-checked for Selected in checkable menus
aria-disabled for Disabled

Colour tokens it reads

color.bg.brand.subtlecolor.bg.danger.subtlecolor.bg.subtlecolor.border.focuscolor.icon.disabledcolor.icon.secondarycolor.text.brandcolor.text.dangercolor.text.disabledcolor.text.primarycolor.text.tertiary

overlays 10 Figma variants Try it in the live demo