Dock

A safe-area-aware bottom navigation band with equal-width items. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• dock, dock-item, dock-label

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<nav class="dock" aria-label="Primary">
  <a class="dock-item" href="/" aria-current="page"><span class="dock-label">Home</span></a>
  <a class="dock-item" href="/search"><span class="dock-label">Search</span></a>
</nav>

Variants and composition

dock-item shares available width; dock-label wraps navigation text. Current and unavailable states use native or ARIA attributes, not a separate modifier.

Behavior and accessibility

Reserve the rendered dock height in page content so the last item stays reachable. The safe area changes its minimum height, and long labels can wrap.

Reference

See the interactive Storybook specimen ↗. Continue to Dropdown or return to the Official preset overview.