Skip to content
PatternFly logo

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.

Demos

Collapsed

Collapsed screenshot

Expanded

Expanded screenshot

Expanded bottom

Expanded bottom screenshot
Drawer with jump links screenshot
Expanded drawer with jump links screenshot

Documentation

This demo implements the drawer in context of the page component.


View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines