Drawer

Drawers can be used to store and show more information than immediately presented on a page. A drawer with more information is usually prompted by a user click. Upon the click, the drawer comes out and shows more information, which is usually relevant to a whole page.

Drawers appear as a sliding panel that can be attached to the bottom or sides of a window. They’re commonly used in a primary-detail, which is a layout that uses a drawer for details and spans the height of the primary content. The primary content can be placed in any container, and the details drawer will span the height of that container. The drawer component is used for the details because it's common for the "detail" in primary-detail to be toggled open/close, while the primary content should always be present on the screen. For a primary-detail in a card, the details section is still built with a drawer component even when it's not collapsible.

In addition to primary-details, the drawer component is frequently used in notification drawers or terminal windows.

A splitter allows you to create a layout with resizable panes. The orientation of a splitter can be set to vertical or horizontal. Depending on the direction the drawer opens within the page, you can place a splitter at the start or end of a drawer.

Place the splitter on the opposite side from which the drawer opens: on the left for a right-opening drawer, on the right for a left-opening drawer, and at the top for a bottom-opening drawer.

Add a splitter to a drawer if you need to resize the width or height of a panel to give content more space. If data shown in a drawer has enough space, then you don’t need to use a splitter.

There are 2 types of drawer displays: overlay and inline.

An overlay drawer appears "on top" of page content, and must be minimized or closed in order for users to view the content that is covered by the expanded drawer. Overlay drawers in default and glass mode will have the --pf-t--global--background--color--floating--default token applied.

An inline drawer is placed beside page content, making the rest of the page content more compact (but still visible). All inline drawer variants have a --pf-t--global--background--color--primary--default token applied. In glass mode, inline drawers inherit the glass styling and have no background color.

A rounded overlay drawer is available across all themes. Apply the pf-m-pill class modifier or the isPill React property to enable the rounded style. The --pf-t--global--border--radius--medium (16px) border radius token and --pf-t--global--border--color--subtle border color token are applied to all rounded drawers. When placing a rounded drawer in a page, use the global/spacer/inset/page-chrome gutter token to ensure consistent spacing.

The rounded overlay drawer has a .pf-v6-u-box-shadow-md (medium box shadow) applied to the entire drawer.

For an overlay pill drawer sitting above the main content area, the margin around the overlay drawer should use gutter spacer --pf-t--global--spacer--gutter--default on the top, bottom, and right if possible (or look visually equivalent if another code implementation is needed).

For compass layouts, use a pill drawer. To see the pill overlay drawer in action, view the compass layout demo.

The inline pill drawer shares the same base styling as the overlay pill drawer. In the glass theme, a .pf-v6-u-box-shadow-md (medium box shadow) is applied to the entire drawer.

By default, a drawer is placed on the right side of the UI. Depending on your user case, you can adjust this so that the drawer is on the left or at the bottom of the page instead.