Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Bottom

Nested Bottom Drawers for React

A bottom drawer with a button that opens a second drawer on top of it.

Framework
UI library

Two levels of drawer: the parent holds a button that opens a second drawer above it. Closing the nested one brings people back to the parent, where they were. Use it for a short follow-up step, such as picking an option, without losing the first panel.

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 is the second drawer nested?

The nested Drawer, with its own trigger and content, sits inside the parent's DrawerContent. Opening it stacks the new panel above the parent.

How do people get back to the parent?

Close Nested is a DrawerClose inside the nested drawer, so it closes only that one. Escape and a swipe down also close the top drawer first. The Button goes in the render prop of DrawerClose.

What happens to the parent while the nested drawer is open?

It stays open underneath. The parent dims its content and steps back behind the nested drawer, then comes forward again when it closes.

How deep should drawers nest?

One level is usually enough. Past two, people lose track of where they are; move the flow to a page instead.

How does the parent open?

An outline button opens the drawer. Its text, Open Parent Drawer, is the accessible name. The Button goes in the render prop of DrawerTrigger.

What do the drawers announce?

DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading. The parent reads Parent Drawer and the nested one Nested Drawer, each with its own description.

All 22 drawer examples