Navigation

Menu

A standalone menu of actions, with no trigger button. Arrow keys move between items.

ReactVueWeb Components
View in Storybook

Playground

Examples

<Menu aria-label="操作" items={[{ label: '編集', value: 'edit' }, { divider: true }, { label: '削除', value: 'delete' }]} onSelect={run} />

Props

Name Type Default Description
items required MenuItemDef[] Menu entries (items and dividers).
onSelect (value: string | undefined, index: number) => void Called when an item is activated.
aria-label string Accessible label for the menu.

Accessibility

  • Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
  • Every interaction works with the keyboard alone.
  • The focus ring is always visible.
  • Respects prefers-reduced-motion and stops excessive motion.

Every component is designed to meet WCAG 2.1 AAA.