# Drawer

Source: https://design.ritchiebros.com/components/navigation/drawer/

A drawer is a panel that slides in from an edge of the screen to present navigation or supplementary content without leaving the current context.

## Figma

The Figma reference for **Drawer** will appear here once the design link is added.

## Storybook

Interactive examples for **Drawer** will render here once the Storybook link is wired in.

## Best practices

- Use a temporary drawer for navigation or secondary content on smaller screens.
- Use a permanent or persistent drawer for primary navigation that should stay visible on larger screens.
- Provide a clear way to open and close the drawer.
- Keep drawer content focused on navigation or a single supplementary task.

## Do’s and don’ts

**Do:** Slide in supplementary navigation or filters, then let people return to their context.

**Don’t:** Force critical, blocking decisions into a drawer — use a dialog instead.

## Accessibility

- A temporary drawer traps focus while open and restores it to the trigger on close.
- Support closing with the Escape key and a visible close control.

## Related components

- [AppBar](https://design.ritchiebros.com/components/surfaces/app-bar/)
- [Modal](https://design.ritchiebros.com/components/utils/modal/)
- [Menu](https://design.ritchiebros.com/components/navigation/menu/)