Skip to content

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

Free

Navigation with Search Sheet for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not filter these links.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Sheet>
    <SheetTrigger asChild={props => <Button {...props()} variant="outline">Menu</Button>} />
    <SheetContent side="left">
      <SheetHeader>
        <SheetTitle>Menu</SheetTitle>
      </SheetHeader>
      <div class="flex flex-col gap-4 p-4">
        <Input aria-label="Search menu" placeholder="Search menu..." type="search" />
        <nav class="flex flex-col gap-2">
          {LINKS.map(link => <a class="font-medium text-sm hover:underline" href="#">
              {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 and read details.open in onOpenChange.

How does the Menu button open the sheet?

The outline button labeled Menu is the trigger, and its text is the accessible name. asChild on SheetTrigger receives props: spread them onto the button.

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 asChild, props and side="left". The rest is on the Sheet page.

Button

Sets props and 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