Dowel

Loading…

Sidebar

The application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.

Navigation
1 file
1 npm package
Accessibility notes

Installation

The CLI installs sheet as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add sidebar

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { SidebarProvider } from "@/components/ui/sidebar";

Examples

Every example the tests run, live and operable, side by side.

Default
Collapsed

API

Generated from the component's own types, so a prop cannot appear here without existing.

<SidebarProvider>

Prop	Type	Default
`defaultOpen`	`boolean`	`true`
`onOpenChange`	`(open: boolean) => void`	—
`open` Controlled open state.	`boolean`	—
`children`	`ReactNode`	—

<Sidebar>

Prop	Type	Default
`label` (required) Names the navigation landmark. Required, not optional. A page has more than one navigation region — this, a breadcrumb, a footer — and three landmarks all called "navigation" is a list a screen reader user cannot choose from.	`string`	—
`mobileTitle` Title for the overlay on a narrow screen, where it is a dialog.	`string`	—

Plus every attribute of <aside>.

<SidebarHeader>

Plus every attribute of <div>.

<SidebarContent>

Plus every attribute of <div>.

<SidebarFooter>

Plus every attribute of <div>.

<SidebarGroup>

Plus every attribute of <div>.

<SidebarGroupLabel>

Plus every attribute of <div>.

<SidebarMenu>

Plus every attribute of <ul>.

<SidebarMenuItem>

Plus every attribute of <li>.

<SidebarMenuButton>

Prop	Type	Default
`isActive` The page currently being shown.	`boolean`	`false`
`asChild` Render the child as the control, for a router's own link or a button.	`boolean`	`false`

Plus every attribute of <a>.

<SidebarMenuLabel>

Plus every attribute of <span>.

<SidebarTrigger>

Prop	Type	Default
`label` Overrides the label, which otherwise says what pressing it will do.	`string`	—

Plus every attribute of <button>.

<SidebarInset>

Plus every attribute of <main>.

Accessibility

The navigation landmark must be named — a page has several, and three regions all called "navigation" is a list nobody can choose from. The active entry carries aria-current="page" rather than only a background colour. On a narrow screen it is a Sheet, not a styled div: an overlay needs a focus trap and an Escape key, and without them the page behind stays reachable by Tab while the menu covers it. When the rail collapses, labels are visually hidden rather than removed — removing them leaves controls whose only content is an icon, which is how a collapsed sidebar becomes a column of links all announced as "link". The trigger says what pressing it will do, not what the state currently is. The overlay is mounted only on a narrow screen and has its own open state: a modal dialog that CSS hides is still modal, and mounting it always made every wide screen aria-hidden and unclickable whenever the rail was open.

Quality

Measured from the source and its tests at build time.

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Admin dashboard
AI workspace