Save the Dogs Design System — Navigation surfaces

Bars and rails that move you through the app — each a THIN composition over the <Surface> primitive (they reuse Surface's elevation / padding / radius / tone rather than reinventing it). Toolbar and CommandBar are pure presentational slots (server-safe); NavigationRail and BottomBar add a small client interaction layer (roving tabindex, active state) but take only callbacks + slots, never data or server actions.

Toolbar: Horizontal action/control bar on Surface with left · center · right slots (center is a flex spacer). role=toolbar; the generic of the .command-bar pattern. Server-safe.
CommandBar: A filter/command toolbar: a growing search slot (role=search) + inline control slots + a right-pinned actions slot. The structured cousin of Toolbar. Server-safe.
NavigationRail: Vertical icon rail (activity-bar) on Surface. role=toolbar aria-orientation=vertical with FULL roving tabindex (Arrow keys move, Home/End jump, Enter/Space activate), active state via aria-current, and count badges.
BottomBar: Mobile bottom nav: a <nav> fixed to the viewport bottom, full-bleed Surface, 3–5 icon+label items, active state (aria-current), safe-area inset padding. fixed={false} docks it in a container for demos.

A framed horizontal bar with left / center / right slots. The center slot lives in a flex-1 spacer, so left + right alone push to the edges, and a center group stays centered between them. Drop any DS controls (Button, IconButton, Divider…) into the slots.

Toolbar — left (title + back) · center (segmented) · right (actions)

Toolbar — left + right only (center spacer pushes them apart)

Toolbar — free-form children (icon button cluster)

CommandBar

The search + filters + actions strip that sits above tables and lists. The search slot grows (and is wrapped in role=search); inline control slots hold selects / filter chips; the actions slot is pinned to the right edge.

CommandBar — search · filter select + chips · actions

CommandBar — minimal (search only)

A vertical icon rail (activity-bar). It's a role=toolbar (aria-orientation=vertical) with roving tabindex: tab into the rail once, then Arrow Up/Down (or Left/Right) move focus between enabled items, Home/End jump to the first/last, and Enter/Space (or click) activate. The active item carries aria-current; the disabled item is skipped by the keyboard. Tab into it and try the arrow keys.

Content area — the rail pins navigation to the left edge while the page scrolls here.

NavigationRail — header (brand) · items + active + badge · footer (avatar)

BottomBar

The mobile bottom navigation bar — a <nav> normally fixed to the viewport bottom with safe-area inset padding, 3–5 icon+label items, and an active state (aria-current). Here it's shown DOCKED in a phone frame (fixed={false}) so it sits at the bottom of the frame instead of the page.

BottomBar — docked in a phone frame (fixed={false}), 5 items + badge

Navigation surfaces

Toolbar

Roster

CommandBar

NavigationRail

BottomBar

Teams