shadcn.io is not affiliated with official shadcn/ui
Drawer examples · Left
Left Drawer File Explorer for React
A left drawer with a file tree whose folders expand and collapse to show their files.
A small file explorer in a left drawer. Projects is open from the start and holds the Website and App folders, each a Collapsible with its files. The chevron turns as a folder opens, and the indent grows with each level.
Preview
Installation
FAQ
How is the tree built?
From nested Collapsibles. Projects sets defaultOpen, and Website and App map from a static list of folders, each with its files inside CollapsibleContent.
How is each level indented?
Every CollapsibleContent has ms-4, so each level starts a step further in, on the reading side.
How does the chevron show a folder's state?
The trigger has aria-expanded while the folder is open, and the chevron's group-aria-expanded:rotate-90 turns it down.
Do the files open anything?
No, they're ghost buttons with a file icon and no handler. Open the file from each one, and close the drawer if it should get out of the way.
Pass open to Drawer; onOpenChange receives the next boolean.
Related
- Left Drawer with Nested ItemsA left drawer menu whose Products and
- Left Drawer Navigation MenuA left drawer with a navigation menu of
- Multi-Level Nested AccordionAn accordion of help center topics where
- Left Drawer with SearchA left drawer with a search field above
- Simple Left DrawerA drawer that slides in from the left
- Bottom Drawer Event DetailsA bottom drawer with an event's badges