Drawer

The Drawer is a sliding panel that appears from the edge of the screen, commonly used to present additional content without navigating away from the current view. It is designed to provide a smooth, focused user experience on both desktop and mobile.

Figma Link

Open in Figma

Figma

Up to date

Status

The component has a health status indicated

Stable

HTML

Up to date

React

Up to date

Design Usage

Standalone Panel
Use the Drawer as an off-canvas element to display contextual or supplementary content (e.g., filters, settings, forms). It's ideal when you want to keep the user on the current page while showing more details.

Mobile Navigation
On mobile devices, the Drawer acts as a navigation container, typically accessed via a hamburger icon in the header. This pattern helps save space and keeps the interface clean.

Designer Tips

Ensure the drawer content is concise and easy to scan.

Avoid nesting drawers or overwhelming the user with too much information.

Always provide a clear way to close the drawer (e.g., close button, overlay tap).