Menu

Menu is a headless, low-level menu primitive that handles keyboard navigation, focus management, and ARIA attributes. It is the foundation for DropdownMenu and ContextMenu. Menu itself does not handle positioning or anchoring; consumers provide those.

Usage

import { Menu, MenuContent, MenuItem, MenuGroup, MenuLabel, MenuSeparator } from '@loke/ui/menu';

export default function Example() {
  return (
    <Menu>
      <MenuContent>
        <MenuLabel>Actions</MenuLabel>
        <MenuItem>Create</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuSeparator />
        <MenuGroup heading="Settings">
          <MenuItem>Preferences</MenuItem>
          <MenuItem>Help</MenuItem>
        </MenuGroup>
      </MenuContent>
    </Menu>
  );
}

Sub-components

• MenuContent — Menu container
• MenuItem — Regular action item
• MenuCheckboxItem — Checkbox item
• MenuRadioGroup — Container for radio items
• MenuRadioItem — Radio item
• MenuLabel — Non-interactive label
• MenuSeparator — Visual divider
• MenuGroup — Groups related items with optional heading
• MenuPortal — Portal container
• MenuAnchor — Anchor point for positioning
• MenuArrow — Arrow pointing to anchor

Props

Examples

Static menu with groups and separators

Checkbox items

Radio group

Accessibility

• Arrow keys navigate items; Enter activates.
• Escape closes the menu.
• Checkbox items show aria-checked.
• Radio items are mutually exclusive.
• Disabled items are not focusable and not announced.
• Menu has role="menu"; items have role="menuitem".

Best practices

• Use DropdownMenu for anchored menus (simpler).
• Use Menu when you need custom positioning logic.
• Group related items and use separators for visual clarity.
• Provide keyboard shortcuts as visual hints (e.g., "Cmd+K").