Prepared Docs

Overview

Sidebar is the persistent navigation column for desktop-class operator consoles. It encodes the product's information architecture into an always-visible column with grouped items, active-state highlighting, optional nested groups, and a footer slot for user/status affordances. Dispatch relies on it for the top-level jump between Incidents, Chats, QA, and Supervisor tools; the docs app uses the same family for the components/blocks tree. The mental model is "the table of contents for the app": stable, scannable, and muscle-memorable. If users have to hunt for a core module, the sidebar has failed its job.

When to use

For desktop-first or responsive products with multiple primary modules

When navigating among four or more peer modules is a routine action, a sidebar beats a hamburger. Operators scan a visible column faster than they open a menu.

Items appear or disappear based on permissions, but the scaffolding (groups, order, icons) remains the same. A supervisor sees more items, not a different layout—this is what makes the column muscle-memorable.

For long-running operator consoles

Dispatch shifts run long; the sidebar is on-screen for hours. Consistent iconography and stable ordering matter because operators don't re-read every label on every glance.

When not to use

For mobile-primary experiences

On narrow viewports, a persistent column steals the content area. Use a drawer navigation pattern and keep the sidebar chrome for the desktop breakpoint.

During training simulation or a takeover workflow, hide global navigation so the operator isn't tempted to leave mid-task. The sidebar is app chrome; don't render it during flow containers that own the viewport.

For single-page marketing or landing surfaces

A header nav is simpler and better suits pages where there's nothing to navigate between.

Use Tabs or TabNav. The sidebar is for app-wide navigation; tabs live inside a single module.

Variants

Axis	Values	When to pick it
Density	Expanded, collapsed	Expanded by default on wide viewports; collapsed persists per user when the product supports personalization
Grouping	Flat, with labels, with nested groups	Labels earn their weight at ~5 items; nested groups stay under three levels without designer review
Footer slot	None, user menu, status widgets	Used sparingly; a crowded footer competes with the module list

Composition

Sidebar is a Provider that manages collapse state, a Header for product identity, scrollable Content with Groups of Items (optionally nested), and a Footer for the user menu or operator status. Each item pairs an icon and a label; icons alone require tooltip or aria-label support. Keep labels short, sentence-case, and parallel across groups—operators should feel a rhythm when scanning.

Content guidelines

Group labels are short nouns, sentence-case, localized with formatMessage. Match the vocabulary used in breadcrumbs and page titles.
Item labels stay short enough to fit in the collapsed width without wrapping. Test the longest expected translation inside the column.
Icons are the same glyph across the product: the "Analytics" pickaxe in Sidebar matches the pickaxe in Search and in breadcrumbs.
Badge counts belong in the trailing slot, not in the label text. "Incidents 12" loses meaning in translation; an explicit count slot stays honest.

Behavior and states

Active state. Active item styling mirrors router state; update immediately on programmatic navigation so a hanging highlight doesn't mislead.
Collapse. Expand/collapse respects prefers-reduced-motion. Persist the preference per user when personalization is a product goal.
Focus. Collapse toggles have accessible names and don't trap focus. Keyboard users should reach every item in a single Tab sequence.
Overflow. Long item lists scroll inside the column; the header and footer stay fixed. Don't nest scroll containers—pick the outer one and let the items flow.

Best practices

Place highest-frequency destinations near the top. Dispatch operators spend most of their shift in three modules; those belong above the fold.
Group settings and supervisor tools into their own section so the surface-level columns aren't cluttered by admin items.
Keep iconography consistent with the rest of the product. The same glyph everywhere for "Analytics" is a small detail with a big navigation cost when it's wrong.

Don't

Duplicate every tab route in the sidebar. Tabs handle in-page navigation; the sidebar handles app-wide navigation.
Hide the only path to emergency or safety-critical functions behind a collapsed group without a discovery aid.
Re-order items per user or per role without an explicit setting. The column is muscle memory—moving things breaks the memory.

Accessibility

Sidebar is a navigation landmark with a product-language accessible name ("Main", "Dispatch", "App"). Each item needs a visible label or tooltip when collapsed; focus order matches visual order; collapse toggles are keyboard operable. See Accessibility for the full contract including landmark roles and keyboard patterns.

Drawer for overlay navigation on narrow viewports.
List item for the patterns inside groups.
Tab nav for in-module route-based navigation.
Tooltip for icon-only density modes.

Select / Accessibility

Sidebar / API and Development

Overview

When to use

For desktop-first or responsive products with multiple primary modules

For role-aware navigation where structure stays stable

For long-running operator consoles

When not to use

For mobile-primary experiences

For modal task flows that should isolate the operator

For single-page marketing or landing surfaces

For in-page navigation among peer sections

Overview

When to use

For desktop-first or responsive products with multiple primary modules

When navigating among four or more peer modules is a routine action, a sidebar beats a hamburger. Operators scan a visible column faster than they open a menu.

For long-running operator consoles

Dispatch shifts run long; the sidebar is on-screen for hours. Consistent iconography and stable ordering matter because operators don't re-read every label on every glance.

When not to use

For mobile-primary experiences

On narrow viewports, a persistent column steals the content area. Use a drawer navigation pattern and keep the sidebar chrome for the desktop breakpoint.

For single-page marketing or landing surfaces

A header nav is simpler and better suits pages where there's nothing to navigate between.

Use Tabs or TabNav. The sidebar is for app-wide navigation; tabs live inside a single module.

Variants

Axis	Values	When to pick it
Density	Expanded, collapsed	Expanded by default on wide viewports; collapsed persists per user when the product supports personalization
Grouping	Flat, with labels, with nested groups	Labels earn their weight at ~5 items; nested groups stay under three levels without designer review
Footer slot	None, user menu, status widgets	Used sparingly; a crowded footer competes with the module list

Composition

Content guidelines

Group labels are short nouns, sentence-case, localized with formatMessage. Match the vocabulary used in breadcrumbs and page titles.
Item labels stay short enough to fit in the collapsed width without wrapping. Test the longest expected translation inside the column.
Icons are the same glyph across the product: the "Analytics" pickaxe in Sidebar matches the pickaxe in Search and in breadcrumbs.
Badge counts belong in the trailing slot, not in the label text. "Incidents 12" loses meaning in translation; an explicit count slot stays honest.

Behavior and states

Active state. Active item styling mirrors router state; update immediately on programmatic navigation so a hanging highlight doesn't mislead.
Collapse. Expand/collapse respects prefers-reduced-motion. Persist the preference per user when personalization is a product goal.
Focus. Collapse toggles have accessible names and don't trap focus. Keyboard users should reach every item in a single Tab sequence.
Overflow. Long item lists scroll inside the column; the header and footer stay fixed. Don't nest scroll containers—pick the outer one and let the items flow.

Best practices

Place highest-frequency destinations near the top. Dispatch operators spend most of their shift in three modules; those belong above the fold.
Group settings and supervisor tools into their own section so the surface-level columns aren't cluttered by admin items.
Keep iconography consistent with the rest of the product. The same glyph everywhere for "Analytics" is a small detail with a big navigation cost when it's wrong.

Don't

Duplicate every tab route in the sidebar. Tabs handle in-page navigation; the sidebar handles app-wide navigation.
Hide the only path to emergency or safety-critical functions behind a collapsed group without a discovery aid.
Re-order items per user or per role without an explicit setting. The column is muscle memory—moving things breaks the memory.