Sidebar

The dark navigation column of the web apps, with the brand on top and the person signed in at the foot. It stays dark in every theme, like the Tracker.

Sidebar
SidebarUser

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Sidebar

Narrow the window: the sidebar becomes a sheet behind the menu button.

Dark theme, Sidebar

Narrow the window: the sidebar becomes a sheet behind the menu button.

High contrast theme, Sidebar

Narrow the window: the sidebar becomes a sheet behind the menu button.

UsageLink to the section Usage

tsx

import { Sidebar, SidebarUser } from '@skribly/ui/shell'

tsx

<Sidebar label="Sidebar" closeLabel="Close navigation" header={<Brand />}
  footer={<SidebarUser name="Ada Lovelace" description="Admin" signOut={{ label: 'Sign out', onPress: signOut }} />}>
  <SidebarNav label="Main" current={pathname}>…</SidebarNav>
</Sidebar>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A named complementary landmark.
The focus ring turns to the nav accent on the dark surface.
The sign out button is named by its label and shows it as a tip; long names wrap.
In forced colours the sidebar keeps a border.

This demo runs through axe in all three themes on every test run. See what the tests check.