Drawer
Also known as: Side panel, Slide-out menu
Resources
Properties
| Property | Values | Default |
|---|---|---|
Position Variant | Start | End | End |
Has title Boolean | true | false | true |
Title Text | string | Title |
Has action Boolean | true | false | true |
Swap content InstanceSwap | Any component | Placeholder |
Best practises
- Drawers are more commonly used in tablet and desktop devices.
- Use drawers for secondary content or workflows that support the main task (editing details or settings, applying filters).
- Anchor drawers to the left or right side depending on context.
- Avoid obscuring primary actions with drawer, unless the draw is modal and persistent in nature.
- Avoid stacking multiple drawers.
- Always provide a clear dismissal method, such as close button or clicking outside the drawer.
When to use
When displaying additional details about a specific unit or item without navigating away from the main content.
When users need to interact with content like forms, settings or data without disrupting their workflow.
If the content requires full attention or complex interactions, use a dedicated page instead.
Note:
Instance swap allows using custom content in a component. Read about the feature from Figma learn.
Behaviour
Drawers typically slide in from the side of the screen and are most commonly used on desktop and tablet devices. Drawers can be modal or nonmondal:
- Modal drawers block user interaction with the rest of the interface until closed. Use this only for urgent or critical tasks requiring immediate attentiong.
- Nonmodal drawers allow users to continue interacting with the rest of the page. This is better suited for optional or non-disruptive interactions.
Size
Drawer height usually spans 100% of the viewport, while width varies based on context and layout density. Use a narrow drawer if it's for quick navigation. Wider drawers are useful for detailed items, flows with multiple steps and forms.