ClankDesign
Clank Design/Toolbar

Collections / headless primitive

Toolbar

A direction-aware collection of common controls.

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

Semantic parts

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

rootbuttonlinkinputgroupseparator

Keyboard guidance

This preview is horizontal. Arrow navigation applies to toolbar controls; its text input retains native editing behavior. Vertical arrows apply only to a vertical toolbar.

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

ArrowLeft
Move horizontally, respecting text direction
ArrowRight
Move horizontally, respecting text direction
ArrowUp
Move through a vertical toolbarVertical orientation only; this preview is horizontal.
ArrowDown
Move through a vertical toolbarVertical orientation only; this preview is horizontal.
Home
Focus the first enabled control
End
Focus the last enabled control
Tab
Enter or leave the toolbar as one document Tab stop