Sidebar

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 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. 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. 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. 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. 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. Do Don't 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.