Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Left

Left Drawer with Nested Items for React

A left drawer menu whose Products and Orders sections expand to show their sub-items.

Framework
UI library

A left drawer with a two-level menu. Dashboard and Analytics are single buttons; Products and Orders are Collapsible sections whose chevron turns as they open. Each section opens on its own, so people can expand both.

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

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. The Button goes in the render prop of DrawerTrigger.

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.

All 22 drawer examples