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
ImportingUsagerh-drawerImportingUsagerh-drawer

Importing

Add rh-drawer to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-drawer/rh-drawer.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS shim

Warning

Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .

 
<link rel="stylesheet" href="/path/to/rh-drawer/rh-drawer-lightdom-shim.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Usage 

<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>

<style>
  #main {
    padding: var(--rh-space-2xl, 32px);
  }
</style>

<script type="module">
  import '@rhds/elements/rh-drawer/rh-drawer.js';
</script>
Copy to Clipboard Wrap lines

rh-drawer

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).

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 3

Slot Name Summary Description
close-label

Close button label

Inline text for the close button. Defaults to "Close drawer". Should be localized for non-English contexts. Also available as the close-label attribute.
[default]

Panel content

Expects block elements for panel content such as div, nav, headings, or rh-navigation-vertical.
Note: [default] unnamed slots do not have a slot="name" attribute.
collapse-label

Collapse toggle label

Inline text for the collapse toggle button. Defaults to "Toggle panel". Should be localized for non-English contexts. Also available as the collapse-label attribute.

Attributes 8

Attribute DOM Property Description Type Default
inline inline

Which side the panel appears on.

 
'start' | 'end'
 
'start'
position position

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.

 
'viewport' | 'contained'
 
unknown
collapsible collapsible

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

 
boolean
 
false
open open

Whether the drawer panel is open.

 
boolean
 
false
trigger-id triggerId

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.

 
string
 
unknown
accessible-label accessibleLabel

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.

 
string
 
unknown
close-label closeLabel

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

 
string
 
unknown
collapse-label collapseLabel

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

 
string
 
unknown

Methods 3

Method Name Description
show()

Opens the drawer panel.
close()

Closes the drawer panel.
toggle()

Toggles the drawer panel open/closed.

Events 3

Event Name Description
open

Fires when the drawer panel opens. The event's trigger property is the HTMLElement that initiated the action, or null when opened via show().
close

Fires when the drawer panel closes. No additional data.
threshold

Fires once on connection with the initial state, and on each subsequent responsive breakpoint crossing. The direction property is 'above' or 'below'.

CSS Shadow Parts 3

Part Name Summary Description
panel
close-button
collapse-toggle

CSS Custom Properties 3

CSS Property Description Default
--rh-drawer-z-index 10
--rh-drawer-panel-padding var(--rh-space-lg, 16px)
--rh-drawer-content-rows 1fr

Design Tokens 24

Token Description Copy
--rh-length-3xl

Collapse toggle button size

48px length token
--rh-color-surface-lightest

Primary surface (light theme)
--rh-color-surface-darker

Secondary surface (dark theme)
--rh-font-family-body-text

Body text font family
--rh-color-text-primary
--rh-space-2xl

Visible width reserved for the collapse toggle when the panel is closed

32px spacer
--rh-space-md

8px spacer
--rh-border-radius-default

Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once.
--rh-color-text-secondary
--rh-color-text-secondary-on-dark

Secondary text color for dark theme
--rh-color-text-secondary-on-light

Secondary text color for light theme
--rh-color-interactive-secondary-active
--rh-space-lg

16px spacer
--rh-color-icon-secondary
--rh-box-shadow-sm

Small box shadow
--rh-color-surface-light

Secondary surface (light theme)
--rh-color-surface-dark

Tertiary surface (dark theme)
--rh-color-interactive-primary-default
--rh-border-width-lg

Applies a 3px border width to 1 side of a container. It should be used for strong directional emphasis like indicating a current page, expanded, or selected state. Recommended for elements needing heavy visual weight like Accordion, Navigation, or Tabs. It must also be used for the focus indicator border per WCAG. Except for the focus indicator, it should not be applied to all 4 sides at once.
--rh-color-blue-50

Label - Filled (Blue) accent color
--rh-color-blue-30

Inline link (dark theme)
--rh-border-width-sm

Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional.
--rh-color-border-subtle
--rh-space-xl

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