Sidebar · SWSHD Documentation

Overview

Sidebar is the dashboard rail: a floating rounded surface of pill rows. This site uses it — the navigation on the left is the component.

Web only. On native the parts render nothing; SidebarProvider and SidebarPage pass their children through.

Anatomy

SidebarProvider → SidebarDrawerOpener + SidebarRoot + SidebarPage. The parts:

SidebarProvider

State (collapsed / onCollapsedChange); renders no DOM.

SidebarDrawerOpener

The fixed button that opens the drawer under drawerBelow.

SidebarRoot

The rail — an <aside aria-label> fixed to the viewport's left edge.

SidebarBrand

Logo link and the collapse toggle.

SidebarNav

A <nav aria-label> group of items.

SidebarItem

A link or button pill: Icon or icon slot, label, active, external, notification.

SidebarSpacer

Pushes the second group to the bottom.

SidebarFooter

The slot below the groups — one control (a SidebarTrigger).

SidebarTrigger

A disclosure row for the footer: label, optional meta line, the built-in glyph, and expanded (aria-expanded). It opens something and closes nothing itself.

SidebarLink

An identity link using the trigger's layout: icon, label, optional meta, and an external-link glyph for new-tab destinations.

SidebarPage

The page host: the offset content column and its block <main>.

SidebarPage paints the canvas full width and offsets the page by the rail's current width, animating that offset over motion.duration.slow; inside it a 1200 px block <main> centers the page. It adds no header — pages keep their own — and clips horizontal overflow at the document. The page frame is pageInsetY = 32 px; in drawer mode the top frame is SIDEBAR_PAGE_INSET_TOP_DRAWER = 56 px.

States and motion

Expanded 256 px, collapsed 64 px, rows 44 px — 48 px in the drawer. The user toggles with the brand toggle or [ (ignored while typing). Under autoCollapseBelow (1100 px) the rail starts collapsed; under drawerBelow (900 px) it is an off-canvas drawer. The icon axis is identical in both states, so glyphs do not move; collapsed items show a Tooltip. Reduced motion and automation snap every transition.

Composition rules

Exactly one SidebarBrand, first. Items go only inside SidebarNav; each Nav needs a label. SidebarFooter holds one control (a SidebarTrigger); nothing else renders below it.

SidebarItem, SidebarLink, and SidebarTrigger take Icon (a glyph) or icon (any node, e.g. an Avatar); icon wins when both are passed. No part accepts style: sizes come from SIDEBAR_SIZES, colors from SIDEBAR_TOKENS. Labels are strings the app translates — swshd holds no copy.

Use SidebarLink inside SidebarNav for an entity destination with the same layout as the organization selector. Pass a decorative Avatar, the translated entity name, and href. With external, pass anaccessibilityLabel that announces the destination and new-tab behavior. For a two-line name, pass the upper line as label and the lower line as a string meta; both share typography and truncate separately.

Usage

<SidebarProvider collapsed={pref} onCollapsedChange={setPref}>
  <SidebarDrawerOpener label="Open navigation" />
  <SidebarRoot label="Organization navigation">
    <SidebarBrand href="/home" label="SWSH"
      toggleLabels={{ collapse: "Collapse sidebar", expand: "Expand sidebar" }} />
    <SidebarNav label="Primary">
      <SidebarItem href="/home" label="Home" Icon={IconHome} active />
    </SidebarNav>
  </SidebarRoot>
  <SidebarPage>{children}</SidebarPage>
</SidebarProvider>

Accessibility

Root is an <aside aria-label>; each group a <nav aria-label>; the active item carries aria-current="page"; external items are real anchors with rel="noopener noreferrer"; the trigger is a button named by its label. The closed drawer is inert; Escape or the scrim closes an open one, moving focus back to the opener.

API

No part accepts a style prop; all are configured through props.