Drawer

A drawer is a sliding panel that enters from the right edge of the viewport. It can be configured to either overlay content on a page or create a sidebar by pushing that content to the left.

Examples

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Panel at end

Panel at start

Panel on bottom

Basic inline

Inline panel at end

Inline panel at start

Stacked content body elements

content-body

content-body with padding

content-body

Modified content padding

Drawer content padding.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Modified panel padding

Additional section above drawer content

drawer-section

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.

Drawer panel header

Breakpoint

Resizable at end

Resizable at start

Resizable on bottom

Resizable on inline

Panel with secondary background

Secondary panel

Secondary content

Secondary section

drawer-section

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.

Props

Drawer

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered in the drawer panel
className	string	''	Additional classes added to the Drawer.
isExpanded	boolean	false	Indicates if the drawer is expanded
isInline	boolean	false	Indicates if the content element and panel element are displayed side by side.
isStatic	boolean	false	Indicates if the drawer will always show both content and panel.
onExpand	(event: KeyboardEvent \| React.MouseEvent \| React.TransitionEvent) => void	() => {}	Callback when drawer panel is expanded after waiting 250ms for animation to complete.
position	'start' \| 'end' \| 'bottom' \| 'left' \| 'right'	'end'	Position of the drawer panel. left and right are deprecated, use start and end instead.

DrawerSection

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer section.
className	string	''	Additional classes added to the drawer section.
colorVariant	DrawerColorVariant \| 'no-background' \| 'default' \| 'secondary'	DrawerColorVariant.default	Color variant of the background of the drawer Section

DrawerContent

*required
Name	Type	Default	Description
panelContentrequired	React.ReactNode		Content rendered in the drawer panel.
children	React.ReactNode		Content to be rendered in the drawer.
className	string		Additional classes added to the Drawer.
colorVariant	DrawerContentColorVariant \| 'default' \| 'primary' \| 'secondary'	DrawerContentColorVariant.default	Color variant of the background of the drawer panel

DrawerContentBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer
className	string	''	Additional classes added to the Drawer.
hasPadding	boolean	false	Indicates if there should be padding around the drawer content body

DrawerPanelContent

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer panel.
className	string		Additional classes added to the drawer.
colorVariant	DrawerColorVariant \| 'no-background' \| 'default' \| 'secondary'	DrawerColorVariant.default	Color variant of the background of the drawer panel
defaultSize	string		The starting size of a resizable drawer, in either pixels or percentage.
focusTrap	DrawerPanelFocusTrapObject		Adds and customizes a focus trap on the drawer panel content.
hasNoBorder	boolean	false	Flag indicating that the drawer panel should not have a border.
id	string		ID of the drawer panel
increment	number	5	The increment amount for keyboard drawer resizing, in pixels.
isResizable	boolean	false	Flag indicating that the drawer panel should be resizable.
maxSize	string		The maximum size of a drawer, in either pixels or percentage.
minSize	string		The minimum size of a drawer, in either pixels or percentage.
onResize	(event: MouseEvent \| TouchEvent \| React.KeyboardEvent, width: number, id: string) => void		Callback for resize end.
resizeAriaLabel	string	'Resize'	Aria label for the resizable drawer splitter.
widths	{ default?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; lg?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; xl?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; '2xl'?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; }		Width for drawer panel at various breakpoints. Overriden by resizable drawer minSize and defaultSize.

DrawerHead

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer head
className	string	''	Additional classes added to the drawer head.

DrawerActions

*required
Name	Type	Default	Description
children	React.ReactNode		Actions to be rendered in the panel head.
className	string	''	Additional classes added to the drawer actions button.

DrawerCloseButton

*required
Name	Type	Default	Description
aria-label	string	'Close drawer panel'	Accessible label for the drawer close button
className	string	''	Additional classes added to the drawer close button outer <div>.
onClose	() => void	() => undefined as any	A callback for when the close button is clicked

DrawerPanelDescription

Provides a description within the drawer panel. This should typically follow the drawer head.
*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content to be rendered in the drawer description
className	string		Additional classes added to the drawer description.

DrawerPanelBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer
className	string	''	Additional classes added to the Drawer.
hasNoPadding	boolean	false	Indicates if there should be no padding around the drawer panel body

DrawerPanelFocusTrapObject

*required
Name	Type	Description
elementToFocusOnExpand	HTMLElement \| SVGElement \| string	The element to focus when the drawer panel content expands. By default the first focusable element will receive focus. If there are no focusable elements, the panel itself will receive focus.
enabled	boolean	Enables a focus trap on the drawer panel content. This will also automatically handle focus management when the panel expands and when it collapses. Do not pass this prop if the isStatic prop on the drawer component is true.
Unknown	string	One or more id's to use for the drawer panel content's accessible label.

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub