Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Drawer Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormSide navigationLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsColorAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Drawer

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

A side panel that provides supplementary content or navigation. The default slot holds all panel content and an accessible-label should be set so screen readers can identify the panel per WCAG.

By default the drawer is an overlay that slides over content. When the parent element has container-type: inline-size, the drawer responds to the container width — appearing inline at wide widths and switching to overlay at narrow widths. Add collapsible to enable a collapse toggle (push at wide, overlap at narrow).

#main {
  padding: var(--rh-space-2xl, 32px);
}
 
import '@rhds/elements/rh-drawer/rh-drawer.js';
 
<meta itemprop="description" content="Minimal drawer. Click the trigger to slide the panel open.">
<div id="container">
  <rh-drawer id="drawer" trigger-id="trigger">
    <p>Panel content slotted here.</p>
  </rh-drawer>
  <div id="main">
    <button id="trigger" aria-controls="drawer" aria-expanded="false">Toggle Drawer</button>

    <p>Click the trigger to open the drawer panel.</p>
  </div>
</div>
 
import { Drawer } from "@rhds/elements/react/rh-drawer/rh-drawer.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Minimal drawer. Click the trigger to slide the panel open." />
  <div id="container">
    <Drawer id="drawer" trigger-id="trigger">
      <p>Panel content slotted here.</p>
    </Drawer>
    <div id="main">
      <button id="trigger" aria-controls="drawer" aria-expanded="false">Toggle Drawer</button>
      <p>Click the trigger to open the drawer panel.</p>
    </div>
  </div>
);

Which side the panel appears on.

Overlay positioning mode. viewport fixes the panel to the viewport. contained positions it within the nearest positioned ancestor. When unset, auto-derived: contained if a named container context exists, viewport otherwise.

Adds a collapse toggle so the panel can be expanded and collapsed. Without this attribute, the panel has no toggle.

Whether the drawer panel is open.

ID of the external trigger element that toggles the drawer open and closed. The referenced element receives click handling automatically and receives focus when the panel closes.

Accessible label for the drawer panel. When set, used as aria-label on the panel. When omitted, the panel uses aria-labelledby referencing the first heading found in slotted content.

Label for the close button. Overridden by the close-label slot.

Label for the collapse toggle. Overridden by the collapse-label slot.

 View source on GitHub

Status

When to use

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify