Drawer.md

id	Drawer
cssPrefix	pf-v6-c-drawer
propComponents	Drawer DrawerSection DrawerContent DrawerContentBody DrawerPanelContent DrawerHead DrawerActions DrawerCloseButton DrawerPanelDescription DrawerPanelBody DrawerPanelFocusTrapObject
section	components

import { Fragment, useRef, useState } from 'react'; import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';

Examples

Basic

Panel at end

Panel at start

Panel on bottom

Basic inline

Inline panel at end

Inline panel at start

Stacked content body elements

Modified content padding

Modified panel padding

Additional section above drawer content

Static drawer

Note: For mobile viewports, all drawer variants behave the same way. At the md breakpoint, or where .pf-m-static{-on-[lg, xl, 2xl]} is applied, the static drawer variant’s close button is automatically hidden because the drawer panel doesn’t close by design.

Breakpoint

Resizable at end

Resizable at start

Resizable on bottom

Resizable on inline

Panel with secondary background

With focus trap

When a focus trap is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.

To enable and customize a focus trap on a drawer panel, apply the focusTrap property to the <DrawerPanelContent> component. Enabling a focus trap with focusTrap.enabled will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.

To customize which element receives focus when the drawer panel expands, use the focusTrap.elementToFocusOnExpand property.

Pill

Pill inline