Drawer

Edge-docked overlay with portal, backdrop, and focus management.

Introduction

Drawer docks a panel to a viewport edge. It portals content over a backdrop, locks page scroll by default, and manages focus while open.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Drawer } from "@bridge-ui/vue/Components/Drawer";

import { Drawer } from "@bridge-ui/react/Components/Drawer";

Basic usage

Pair a trigger with a controlled Drawer. Place content such as a Card inside the panel.

Sizes

Use the size prop to control panel width for left/right placement and height for top/bottom. Available sizes: xs, sm, md (default), lg, xl, and full.

Persistent

When persistent is true, Escape and backdrop clicks do not close the drawer. Provide an explicit close action inside the content.

Placements

Use placement to dock the panel to left (default), right, top, or bottom. size controls width for left/right and height for top/bottom.

Transitions and blur

Set transition to slide (default), fade, or none. slide animates from the placement edge; fade fades both layers; none opens instantly. Combine with blur on the backdrop for depth.

Nested drawers

Place a second Drawer inside the first. Each layer gets its own overlay and a higher z-index. Escape closes only the topmost drawer.

Card composition

Combine Drawer with Card for structured panels. Use Card slots for title, body, and footer actions. Additional Drawer props such as blur, size, and transition customize the overlay experience.

Scroll lock

While open, Drawer locks body scroll and adds padding-right on document.body so page content does not shift when the scrollbar disappears. Fixed or sticky UI outside the document flow is not covered by that padding. Bridge UI sets --bridge-scrollbar-compensation on :root with the scrollbar width for the duration of the lock (and clears it when the last locking layer closes):

.my-fixed-header {
  padding-inline-end: var(--bridge-scrollbar-compensation, 0px);
}

Set disableScrollLock if the page should keep scrolling behind the overlay.

When scroll="paper" (the default), overflow happens inside the panel. The panel uses bridge-scroll-fade-y and bridge-hide-scrollbar so a fade hints overflow instead of a thumb. See Scroll utilities.

Related components

Card, Modal, Sidebar, useDrawerAction

Accessibility

• Content under an active drawer is inert—users cannot interact with the page behind the overlay.
• Focus is trapped inside the drawer by default (disableEnforceFocus disables this).
• Focus returns to the trigger on close unless disableRestoreFocus is set.
• Escape closes the drawer when closeOnEscape is true and persistent is false.
• Pass ariaLabel or ariaLabelledBy for an accessible dialog name.

Anatomy

<div> <!-- Drawer root (portaled) -->
  <div> <!-- overlay / backdrop -->
  <div> <!-- panel -->
    <!-- children: Card, form, or custom content -->
  </div>
</div>

API