Anatomy
The same destinations render as compact icons and expanded links; the workspace is a separate content owner.
Collapse control
The visible toggle button changes the rail width; in compact mode, the otherwise blank rail area also provides a full-height expand affordance with an east-west resize cursor and native button keyboard support. Destinations themselves never change the width.
Destination list
Compact mode shows only top-level icons. Expanded mode shows their labeled links and may also show sessions, channels, pages or catalog categories in an independently scrollable list.
Secondary destinations
Expanded-only collections remain navigational links, not scenario controls. Optional section headers can independently collapse their child links, with hover/focus-revealed chevrons when expanded and persistent chevrons when closed. Their grouping and permissions remain product-owned.
Optional account footer
A pinned User profile area can be composed with either Side Panel. The example opens an anchored account popover; its entries open preview-only profile/preferences dialogs, never a real account or billing action.
Current page
One destination is marked aria-current="page" in both views. A route change does not imply a panel state change.
Workspace canvas
In this Docs demo, a chosen destination updates the right-hand title and wireframe. Real routing, history and page data belong to the consumer.
States
Collapsed and expanded rail states are independent of the selected destination.
Collapsed (default)
Selecting a destination changes only the workspace. The rail stays narrow and keyboard focus remains on the activated link.
Expanded
Top-level links match the compact icons. Additional independently collapsible session/category sections may appear, while selecting a destination still preserves panel state.
Responsive
The Navigation Side Panel animates the two-column grid when toggled, so the rail grows while the adjacent workspace shifts and resizes continuously. At compact widths the expanded panel remains in-flow and never overlays the workspace. Reduced-motion preferences disable the transition.
Usage
Use Navigation Side Panel for page destinations and optional expanded-only sessions, channels and catalog lists.
Use direct navigation when rail items replace a page or primary view. Compact icons may show only top-level pages, while expanded navigation can additionally list recent chat sessions (ChatGPT-style), channels (Slack/Discord-style), or shopping catalog categories. The wireframe combines session and category examples to illustrate alternatives; headers collapse each list, and real products choose appropriate groups. These are links, not condition disclosures. App routing, history, permissions and content state remain Consumer-owned.
If compact actions represent headings inside one scrollable conditions panel, use Scenario Control Side Panel instead. The difference is interaction intent, not merely icon styling.
Accessibility
Native links and current-page semantics; no automatic rail expansion or focus jump on navigation.
Use anchors for top-level and expanded-only destinations and aria-current="page" for selection. Provide labeled native buttons with aria-expanded and aria-controls for optional groups; when closed, their child links must not remain tabbable. Keep expanded collections independently scrollable and keyboard reachable; compact mode hides those links as well. Profile dropdowns use menu semantics, focus restoration and dialogs with explicit demo-only scope. Both icon-only and labeled variants need meaningful accessible names, visible keyboard focus and 44px target sizes. Preserve focus after activation in this local wireframe; real route navigation owns its own focus/announcement policy. Animated push layout must keep the workspace available without overlap, including at 320px and 200% zoom. Reduced-motion settings must keep the same geometry but without interpolation. Keep keyboard, Dark and touch behavior usable.