Sidebar

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/sidebar

UsageCopy Anchor Link

SidebarProvider holds the state and lays out the two columns. Put the Sidebar and the page's SidebarInset inside it.

<SidebarProvider storageKey="sidebar">
  <Sidebar>
    <SidebarHeader>{/* logo or workspace switcher */}</SidebarHeader>
    <SidebarContent>
      <SidebarGroup label="Product">
        <SidebarItem icon={<ChartLineIcon />} render={<Link href="/" />} active>
          Overview
        </SidebarItem>
        <SidebarItem icon={<FlagIcon />} render={<Link href="/goals" />} badge={3}>
          Goals
        </SidebarItem>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>{/* the signed-in user */}</SidebarFooter>
  </Sidebar>
  <SidebarInset>
    <header>
      <SidebarTrigger />
    </header>
    {children}
  </SidebarInset>
</SidebarProvider>

The page scrolls with the window and the sidebar stays in place. To fit it inside something smaller, give the provider a height and SidebarInset an overflow-auto.

CollapsingCopy Anchor Link

SidebarTrigger or ⌘B collapses it. collapsible says to what:

• icon leaves a rail of icons. They stay exactly where they were, so your hand does not have to find them again. In SidebarHeader and SidebarFooter, mark your own text with data-sidebar-label so it fades with the rest.
• offcanvas slides it away completely, for pages that need the room.
• none keeps it open.

PeekCopy Anchor Link

Rest the pointer on the rail and the whole sidebar opens over the page, with nothing underneath moving. Leave and it folds back. It waits a moment, so crossing the rail on your way somewhere does not open it. It stays open while a menu from inside it is open, and keyboard focus opens it too, so a keyboard user always sees what is focused.

This is why the rail has no tooltips: a peek shows every name at once, and sub-items as well.

Saved stateCopy Anchor Link

With storageKey, the collapsed state and the width are saved in the browser and put back on the next visit. Saved state usually needs a cookie your server reads, or the page flashes the default first. Here a small inline script restores it while the page is parsed, so there is no flash and nothing to wire up in your layout. With a strict Content Security Policy, pass its nonce.

ResizingCopy Anchor Link

Drag the edge to change the width, between 192 and 384 pixels. Tab to it and use ← and → for the same. Set resizable={false} to turn it off. Resizing and the rail work together: the rail opens back to the width you chose.

Sub-itemsCopy Anchor Link

SidebarSub is a row that opens to more rows. Mark it active when one of its items is the current page, and it starts open. On the rail its items wait for a peek.

<SidebarSub icon={<FunnelIcon />} label="Funnels" active>
  <SidebarItem href="/funnels/signup" active>Signup</SidebarItem>
  <SidebarItem href="/funnels/checkout">Checkout</SidebarItem>
</SidebarSub>

Badges and actionsCopy Anchor Link

badge puts a count at the end of a row, and on the rail it becomes a dot on the icon. action adds a small button that appears on hover or focus, and SidebarGroup takes an action for its heading.

OffcanvasCopy Anchor Link

InsetCopy Anchor Link

variant="inset" sets the page on a card beside the sidebar.

LoadingCopy Anchor Link

SidebarItemSkeleton holds a row's place while the items load, at the same height, so nothing moves.

On phonesCopy Anchor Link

Below 768 pixels the sidebar leaves the page and becomes a sheet from the left. SidebarTrigger opens it, and picking an item closes it.

In your own codeCopy Anchor Link

useSidebar gives anything inside the provider the same state: collapsed, setCollapsed, toggle and mobile. collapsed and onCollapsedChange on the provider control it from outside.

AccessibilityCopy Anchor Link

SidebarContent is the page's navigation landmark, and SidebarInset its main landmark. The current page is marked with aria-current="page". On the rail the names stay in the page, so screen readers read every row. The trigger says whether the sidebar is open, and the edge is a separator with its width as a value.

MotionCopy Anchor Link

The panel slides and the page glides beside it, using translate only: the page's width changes in one step and just its position eases, so long pages do not reflow on every frame. Labels fade. By keyboard it is instant, like everything that answers a key, and reduced motion keeps the fade alone.

Sidebar or something else?Copy Anchor Link

• A short set of views within one page: Tabs.
• A panel for details rather than navigation: Sheet.

API referenceCopy Anchor Link