Skip to content

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

Free

Left Drawer with Nested Items for Solid

A left Menu drawer where Products and Orders expand, and Dashboard and Analytics stay single rows.

UI library: Ark UI

A left panel titled Menu. Dashboard and Analytics are single rows. Products opens to All Products, Categories, and Inventory, and Orders opens to its own items.

Use it for a short two-level menu on a phone. On a desktop, keep that menu in a Sidebar. In Solid, Ark UI opens each section on its own.

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

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="left">
    <DrawerTrigger asChild={props => <Button {...props()} aria-label="Open menu" size="icon-md" variant="outline">
        <MenuIcon aria-hidden="true" />
      </Button>} />
    <DrawerContent showBar={false}>
      <div class="flex flex-col gap-4 p-4">
        <DrawerTitle class="font-semibold text-lg">Menu</DrawerTitle>
        <nav aria-label="Main" class="flex flex-col gap-1">
          <Button class="justify-start" variant="ghost">
            Dashboard
          </Button>
          {SECTIONS.map(section => <Collapsible>
              <CollapsibleTrigger asChild={props => <Button {...props({
            "class": "group w-full justify-between"
          })} variant="ghost">
                  {section.label}
                  <ChevronRightIcon aria-hidden="true" class="transition-transform group-aria-expanded:rotate-90" data-icon="inline-end" />
                </Button>} />
              <CollapsibleContent class="ms-4">
                <div class="mt-1 flex flex-col gap-1">
                  {section.items.map(item => <Button class="w-full justify-start" size="sm" variant="ghost">
                      {item}
                    </Button>)}
                </div>
              </CollapsibleContent>
            </Collapsible>)}
          <Button class="justify-start" variant="ghost">
            Analytics
          </Button>
        </nav>
      </div>
{/* The rest of the file is under Installation. */}

FAQ

How do Products and Orders expand?

Each is a Collapsible. Its CollapsibleTrigger is a ghost button with the label and a chevron, and its CollapsibleContent holds the sub-items, indented with ms-4.

How does the chevron turn?

The trigger has aria-expanded while its section is open, and the chevron's group-aria-expanded:rotate-90 turns it to point down.

Which items are inside?

Products holds All Products, Categories and Inventory; Orders holds All Orders, Pending and Completed. Both start closed.

Can only one section be open at a time?

Not with separate Collapsibles. Use an Accordion instead if opening one section should close the other.

How is the menu button labeled?

An outline icon button opens the drawer. Its aria-label, Open menu, is the accessible name; the icon is aria-hidden. asChild on DrawerTrigger receives props: spread them onto the button.

How does the drawer open from the left?

swipeDirection="left" on Drawer puts it on the left edge. The prop names the swipe that closes the drawer, so left docks it on the left; leave it out for a bottom drawer.

API Reference

Drawer

Sets swipeDirection="left", asChild, props and showBar={false}. The rest is on the Drawer page.

Button

Sets props, aria-label="Open menu", size="icon-md", variant="outline", variant="ghost" and group. The rest is on the Button page.

Collapsible

Sets asChild and props. The rest is on the Collapsible page.

All 22 drawer examples