Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Sidebar Navigation Sheet for React

A Navigation button opens a left-side sheet with Dashboard and Settings groups, each heading over two indented links.

The title is Navigation. Dashboard heads Overview and Analytics. Settings heads Profile and Account.

Use it for app navigation on a small screen. A Sidebar is the version that stays open on a wide page. In React, Base UI does not mark the current link.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    Navigation
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Navigation</SheetTitle>
    </SheetHeader>
    <nav className="flex flex-col gap-4 p-4">
      {GROUPS.map((group) => (
        <div className="flex flex-col gap-2" key={group.title}>
          <h3 className="font-semibold text-sm">{group.title}</h3>
          {group.links.map((link) => (
            <a
              className="ps-4 text-muted-foreground text-sm hover:text-foreground"
              href="#"
              key={link}
            >
              {link}
            </a>
          ))}
        </div>
      ))}
    </nav>
  </SheetContent>
</Sheet>

FAQ

How are the groups built?

From a static array: each group has a title, rendered as an h3, and its links. The nav lays the groups out in a column with gap-4.

How do I mark the current page?

Set aria-current="page" on the link for the page people are on and style it, for example with aria-[current=page]:text-foreground.

How are the links indented?

Each link has ps-4, padding on the start side, so the indent mirrors in right-to-left layouts.

Does the sheet close when a link is clicked?

Links in a sheet don't close it. When a link changes the page, close the sheet in its click handler, or let your router's navigation unmount it. To close it from code, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

How does the Navigation button open the sheet?

The outline button labeled Navigation is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

Which edge does the sheet use?

side="left" on SheetContent slides the panel in from the left, where people look for a menu. It fills the height and caps its width from the sm breakpoint.

API Reference

Sheet

Sets side="left". The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

All 29 sheet examples