Skip to content

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

Free

Navigation with Search Sheet for React

A Menu button opens a left-side sheet with a search field and the links Home, Products, Services, Blog, and Contact.

The sheet is titled Menu. A search field sits above Home, Products, Services, Blog, and Contact. Typing in the field does not hide any link.

Use it when a long menu needs a way to jump. Send the query to a Command palette if the list is the whole app. In React, Base UI does not filter these 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>
    <div className="flex flex-col gap-4 p-4">
      <Input
        aria-label="Search menu"
        placeholder="Search menu..."
        type="search"
      />
      <nav className="flex flex-col gap-2">
        {LINKS.map((link) => (
          <a
            className="font-medium text-sm hover:underline"
            href="#"
            key={link}
          >
            {link}
          </a>
        ))}
      </nav>
    </div>
  </SheetContent>
</Sheet>

FAQ

How is the search field labeled?

It has aria-label="Search menu" and type="search", since no visible label sits above it. The placeholder isn't a label: it disappears as people type.

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.

Input

Sets aria-label="Search menu", placeholder="Search menu..." and type="search". The rest is on the Input page.

All 29 sheet examples