ClankDesign
Clank Design/Menu

Collections / headless primitive

Menu

Actions, links, choices, groups, and nested submenus.

Anatomy reference Framework guide
280–1600px; fits available space.
Menu / interactiveFluid · fits available space

Semantic parts

Spread each part getter onto the matching element, then style its stable state attributes.

triggerportalbackdroppositionerpopupviewportarrowitemlink-itemsubmenu-rootsubmenu-triggergroupgroup-labelradio-groupradio-itemradio-item-indicatorcheckbox-itemcheckbox-item-indicatorseparator

Keyboard guidance

Activate the trigger to open the menu, then navigate enabled items. The displayed command badges are labels, not registered application shortcuts. Submenu arrows only apply when submenus exist.

Keys from the Clank controller contract, with preview and configuration notes. Disabled or read-only controls may prevent changes.

ArrowDown
Focus the next enabled item
ArrowUp
Focus the previous enabled item
Home
Focus the first enabled item
End
Focus the last enabled item
ArrowRight
Open a submenu in left-to-right layouts or close it in right-to-left layoutsOnly where a submenu is configured; this preview has no submenus.
ArrowLeft
Close a submenu in left-to-right layouts or open it in right-to-left layoutsOnly where a submenu is configured; this preview has no submenus.
Enter
Activate the focused item
Space
Activate the focused item
Escape
Close and restore trigger focus
Tab
Close without trapping document focus