Skip to content

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

Free

Nested Navigation Menu Sheet for React

A Menu button opens a left-side sheet with Products and Resources headings, each over three indented links.

The sheet is titled Menu. Products heads All Products, New Arrivals, and Best Sellers. Resources heads Documentation, Guides, and API Reference.

Use it when two levels still fit in a panel. Collapse a long section with an Accordion if only one group should be open. In React, Base UI does not indent the links.

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" />}>Menu</SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Menu</SheetTitle>
    </SheetHeader>
    <nav className="flex flex-col gap-4 p-4">
      {SECTIONS.map((section) => (
        <div className="flex flex-col gap-2" key={section.title}>
          <h3 className="font-semibold text-sm">{section.title}</h3>
          <div className="flex flex-col gap-1 ps-4">
            {section.links.map((link) => (
              <a
                className="text-muted-foreground text-sm hover:text-foreground"
                href="#"
                key={link}
              >
                {link}
              </a>
            ))}
          </div>
        </div>
      ))}
    </nav>
  </SheetContent>
</Sheet>

FAQ

How are the sections built?

From a static array of two sections, each a heading and its links. Products holds All Products, New Arrivals and Best Sellers; Resources holds Documentation, Guides and API Reference.

How are the child links indented?

Their column has ps-4, padding on the start side, so the indent moves to the right in right-to-left layouts.

Can the sections collapse?

Not in this demo: both are always open. Wrap each section in a Collapsible with the heading as its trigger to fold it away.

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 Menu button open the sheet?

The outline button labeled Menu 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 menu 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