Skip to content

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

Free

Nested Bottom Drawers for React

A Parent Drawer with an Open Nested Drawer button that opens a second panel titled Nested Drawer.

Parent Drawer holds a button labeled Open Nested Drawer. That opens Nested Drawer on top, with its own Close button.

Use it for a short second step that should not lose the first panel. Deeper than two levels, send people to a Dialog. In React, Base UI stacks the second panel on the first.

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

Anatomy

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

Usage

<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open Parent Drawer
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Parent Drawer</DrawerTitle>
      <DrawerDescription>
        This drawer contains another drawer inside.
      </DrawerDescription>
    </DrawerHeader>
    <div className="flex flex-col items-start gap-4 p-4">
      <p className="text-muted-foreground text-sm">
        Nested drawers allow you to create multi-level interactions.
      </p>
      <Drawer showSwipeHandle>
        <DrawerTrigger render={<Button />}>Open Nested Drawer</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Nested Drawer</DrawerTitle>
            <DrawerDescription>
              This is a drawer inside another drawer.
            </DrawerDescription>
          </DrawerHeader>
          <div className="p-4">
            <p className="text-muted-foreground text-sm">
              Nested content goes here. You can close this to return to the
              parent drawer.
            </p>
          </div>
          <DrawerFooter>
{/* The rest of the file is under Installation. */}

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.

API Reference

Drawer

Sets showSwipeHandle. The rest is on the Drawer page.

Button

Sets variant="outline". The rest is on the Button page.

All 22 drawer examples