Menu

Action menu for contextual options and commands. Supports icons, keyboard navigation, submenus, sections, dividers, disabled items, and selection.

Open Menu Playground

Anatomy

1 2 3
  1. 1 Menu item — interactive list item
  2. 2 Divider — visual separator between items or sections
  3. 3 Disabled item — non-interactive menu item

Options

Items

Default
Disabled item
Selected item
With icons

Sections with dividers

Sections with labels
Divider

Submenu

Submenu on hover

Table of options

PropertyValuesDefault
ariaLabeltext—
rolemenu / listboxmenu
disabledtrue / falsefalse
selectedtrue / falsefalse
icontext / HTML—
hasSubmenutrue / falsefalse

Keyboard interactions

KeyAction
ArrowDownMoves focus to the next item; wraps to first
ArrowUpMoves focus to the previous item; wraps to last
HomeMoves focus to the first item
EndMoves focus to the last item
Enter / SpaceActivates the focused item
EscapeCloses the menu (fires uif-menu:close event)

Accessibility

  • Use role="menu" on the container and role="menuitem" on each item.
  • Use aria-label on the menu to describe its purpose.
  • Use aria-disabled="true" (not just disabled) on disabled items to keep them discoverable to screen readers.
  • For selection menus, use role="menuitemradio" or role="menuitemcheckbox" with aria-checked on items.
  • The <uif-menu> web component manages roving tabindex automatically.

Design checklist

✓
All brand/mode contextsWorks across light and dark modes.
✓
Keyboard interactionsArrow key navigation, Escape to close.
✓
SubmenusNested menu revealed on hover/focus.
✓
Sections/dividersGrouped items with optional labels and separators.
✓
Disabled itemsNon-interactive items retain accessible presence.
✓
Selection statesSingle and multi-select via aria-checked.
✓
Design tokensComponent-scoped tokens (--uif-menu-*).