Drawer
Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
The 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.
ExamplesPropsCSS VariablesExamples
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 on left
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 on left
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.
Basic inline
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.
Inline panel on left
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.
Inline panel on left
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 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
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.
Additional section above drawer content
drawer-section
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.
Static drawer
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.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the Drawer. |
| children | React.ReactNode | No | Content rendered in the left hand panel | |
| isExpanded | boolean | No | false | Indicates if the drawer is expanded |
| isInline | boolean | No | false | Indicates if the content element and panel element are displayed side by side. |
| isStatic | boolean | No | false | Indicates if the drawer will always show both content and panel. |
| position | 'left' | 'right' | No | 'right' | Position of the drawer panel |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the Drawer. |
| children | React.ReactNode | No | Content to be rendered in the drawer. | |
| panelContent | React.ReactNode | Yes | Content rendered in the drawer panel. |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the drawer. |
| children | React.ReactNode | No | Content to be rendered in the drawer panel. | |
| hasNoBorder | boolean | No | false | |
| width | 25 | 33 | 50 | 66 | 75 | 100 | No | ||
| widthOnLg | 25 | 33 | 50 | 66 | 75 | 100 | No | ||
| widthOnXl | 25 | 33 | 50 | 66 | 75 | 100 | No | ||
| widthOn2Xl | 25 | 33 | 50 | 66 | 75 | 100 | No |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the Drawer. |
| children | React.ReactNode | No | Content to be rendered in the drawer | |
| hasPadding | boolean | No | false | Indicates if there should be padding around the drawer content body |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the Drawer. |
| children | React.ReactNode | No | Content to be rendered in the drawer | |
| noPadding | boolean | No | false | Indicates if there should be no padding around the drawer panel body |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the drawer section. |
| children | React.ReactNode | No | Content to be rendered in the drawer section. |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the drawer head. |
| children | React.ReactNode | No | Content to be rendered in the drawer head | |
| noPadding | boolean | No | false | Indicates if there should be no padding around the drawer panel body of the head |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the drawer actions button. |
| children | React.ReactNode | No | Actions to be rendered in the panel head. |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the drawer close button outer <div>. |
| onClose | () => void | No | () => undefined as any | A callback for when the close button is clicked |
| aria-label | string | No | 'Close drawer panel' | Accessible label for the drawer close button |
CSS Variables
| .pf-c-drawer | --pf-c-drawer__section--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__content--FlexBasis | 100% | ||
| .pf-c-drawer | --pf-c-drawer__content--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__content--ZIndex | 100 | ||
| .pf-c-drawer | --pf-c-drawer__panel--FlexBasis | 100% | ||
| .pf-c-drawer | --pf-c-drawer__panel--md--FlexBasis | 50% | ||
| .pf-c-drawer | --pf-c-drawer__panel--MinWidth | 50% | ||
| .pf-c-drawer | --pf-c-drawer__panel--xl--MinWidth | 28.125rem | ||
| .pf-c-drawer | --pf-c-drawer__panel--xl--FlexBasis | 28.125rem | ||
| .pf-c-drawer | --pf-c-drawer__panel--ZIndex | 200 | ||
| .pf-c-drawer | --pf-c-drawer__panel--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__panel--TransitionDuration | .25s | ||
| .pf-c-drawer | --pf-c-drawer__panel--TransitionProperty | margin, transform, box-shadow | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingTop | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingRight | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingBottom | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingLeft | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingTop | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingRight | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingBottom | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingLeft | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingTop | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingRight | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingBottom | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingLeft | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingTop | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingRight | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingBottom | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingLeft | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingTop | 0 | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingRight | 0 | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingBottom | 0 | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingLeft | 0 | ||
| .pf-c-drawer | --pf-c-drawer__actions--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-drawer | --pf-c-drawer__actions--MarginRight | calc(0.375rem * -1) | ||
| .pf-c-drawer | --pf-c-drawer__panel--BoxShadow | none | ||
| .pf-c-drawer | --pf-c-drawer--m-expanded__panel--BoxShadow | -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-drawer | --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow | 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-drawer | --pf-c-drawer__panel--after--Width | 1px | ||
| .pf-c-drawer | --pf-c-drawer__panel--after--BackgroundColor | transparent | ||
| .pf-c-drawer | --pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor | #d2d2d2 | ||
| .pf-c-drawer__section.pf-m-no-background | --pf-c-drawer__section--BackgroundColor | transparent | ||
| .pf-c-drawer__content | --pf-c-drawer--child--PaddingTop | 0 | ||
| .pf-c-drawer__content | --pf-c-drawer--child--PaddingRight | 0 | ||
| .pf-c-drawer__content | --pf-c-drawer--child--PaddingBottom | 0 | ||
| .pf-c-drawer__content | --pf-c-drawer--child--PaddingLeft | 0 | ||
| .pf-c-drawer__content.pf-m-no-background | --pf-c-drawer__content--BackgroundColor | transparent | ||
| .pf-c-drawer__panel.pf-m-no-background | --pf-c-drawer__content--BackgroundColor | transparent | ||
| .pf-c-drawer__body.pf-m-no-padding | --pf-c-drawer__actions--MarginTop | 0 | ||
| .pf-c-drawer__body.pf-m-no-padding | --pf-c-drawer__actions--MarginRight | 0 | ||
| .pf-c-drawer__body.pf-m-no-padding | --pf-c-drawer--child--PaddingTop | 0 | ||
| .pf-c-drawer__body.pf-m-no-padding | --pf-c-drawer--child--PaddingRight | 0 | ||
| .pf-c-drawer__body.pf-m-no-padding | --pf-c-drawer--child--PaddingBottom | 0 | ||
| .pf-c-drawer__body.pf-m-no-padding | --pf-c-drawer--child--PaddingLeft | 0 | ||
| .pf-c-drawer__body.pf-m-padding | --pf-c-drawer--child--PaddingTop | 1rem | ||
| .pf-c-drawer__body.pf-m-padding | --pf-c-drawer--child--PaddingRight | 1rem | ||
| .pf-c-drawer__body.pf-m-padding | --pf-c-drawer--child--PaddingBottom | 1rem | ||
| .pf-c-drawer__body.pf-m-padding | --pf-c-drawer--child--PaddingLeft | 1rem | ||
| .pf-c-drawer__body:not(.pf-m-no-padding) + * | --pf-c-drawer--child--PaddingTop | 0 | ||
