ClankDesign
Clank Design/NavigationMenu

Collections / headless primitive

NavigationMenu

Focus-safe site navigation with current links and flyout content.

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

Semantic parts

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

rootlistitemtriggericoncontentlinkportalbackdroppositionerpopuparrowviewportindicator

Keyboard guidance

This preview uses a horizontal list. Open a trigger to visit its links; Enter follows a focused native link.

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

ArrowLeft
Move across a horizontal list, respecting text direction
ArrowRight
Move across a horizontal list, respecting text direction
ArrowUp
Move vertically or open a trigger and focus the last content control
ArrowDown
Move vertically or open a trigger and focus the first content control
Home
Focus the first enabled control
End
Focus the last enabled control
Escape
Close content and restore trigger focus