Sidebar

Keep related destinations within reach while leaving room for the current task.

Preview

Default

Design guidance

Use Sidebar for persistent navigation beside a working area. Use Drawer when navigation temporarily covers the page on a small screen; Drawer owns the focus and dismissal behavior. Keep the same destination tree in both presentations.

Keep group labels distinct from destinations. A current-page indicator should identify a link, while a disclosure button opens its children. Sidebar leaves the routes, groups, responsive breakpoint and persistence to your application.

Installation

Install

No source.

Download example files.

Basic usage

1234567891011import {Sidebar} from "@/components/ui/sidebar";

<Sidebar.Root>
  <Sidebar.Panel aria-label="Documentation">
    <Sidebar.Core><nav aria-label="Documentation pages">{/* Your links */}</nav></Sidebar.Core>
  </Sidebar.Panel>
  <Sidebar.Inset>
    <Sidebar.Trigger aria-label="Toggle documentation"/>
    {/* Current page */}
  </Sidebar.Inset>
</Sidebar.Root>

The trigger and panel share a generated ID. A closed panel is hidden and inert. Put the trigger outside the panel so it remains reachable after navigation closes.

Structures

Sidebar.Root owns visibility. Sidebar.Panel contains navigation; Sidebar.Inset holds the adjacent task. Header and Footer stay outside the scrolling Core. Compose Collapsible for groups and Link for destinations.

Examples

Controlled visibility

Use open and onOpenChange when a route or another application control decides visibility. Sidebar requests the next value; the caller commits it.

Initially hidden

Start with the current task and let the trigger reveal its navigation. defaultOpen sets the initial uncontrolled state.

API reference

Sidebar properties
Prop	Type	Default	Description
`open`	`boolean`	`—`	Controlled visibility on Root.
`defaultOpen`	`boolean`	`true`	Initial visibility when Root is uncontrolled.
`onOpenChange`	`(open: boolean) => void`	`—`	Requests a new visibility value.
`children`	`ReactNode`	`—`	Caller-owned layout and navigation content.
`--sidebar-width`	`CSS length`	`260px`	Panel width; set it on Root or a containing element.

Root and the layout parts forward native attributes and refs. Panel owns its ID and visibility so Trigger stays linked to the correct region. Trigger accepts the same props as Button, defaults to a small ghost button, and forwards its button ref. A cancelled click leaves visibility unchanged. Supply text children for a labelled trigger.

Sidebar.useSidebar() returns open, setOpen(open) and panelId inside Root for custom compositions. It does not add a global shortcut or save state; those choices belong to your application.