Expand context on demand
Drawers reveal additional information or actions in a panel anchored to the edge of the screen, without replacing the current view.
Drawer
Drawers slide in from a container to expose additional options and information.
GitHub
components/drawer
components/drawerStorybook
components/drawer
components/drawerKeep the page visible
Unlike a modal, a drawer sits alongside the main content — users can reference what's behind it while working in the panel.
Useful for secondary tasks
Use drawers for settings, filters, or detail panels where the content supports — but doesn't replace — what's already on screen.
1
Panel
2
Title (slot)
3
Description (slot)
4
Content
5
Footer (optional)
Contained
Drawers slide in from the edge of their container to reveal secondary content without replacing the main view.
Renders a panel anchored to the container edge. Use for secondary tasks — such as reviewing details, editing settings, or applying filters — that support the main page without replacing it.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-2-xl under sgds/btn means sgds/btn/padding-2-xl.
sgds/drawer
sgds/padding/2-xlsgds/padding/lgsgds/padding/nonesgds/gap/xssgds/font-size/24sgds/color-defaultsgds/color-subtlesgds/surface-defaultsgds/bg-overlaysgds/dimension/512sgds/dimension/768sgds/dimension/1024When to use
- Use drawer for secondary tasks that need more space but should not interrupt the main page context.
- Use it when users need to review or edit details without leaving the current screen.
When not to use
- Do not use drawer for the primary task on the page.
- Do not overload the drawer with multiple unrelated tasks.
Keep the drawer focused
A drawer works best when it supports one related task and a clear next step.
Do not turn the drawer into a whole page
Too many unrelated tasks or messages make the drawer harder to complete and dismiss.
Built-in accessibility
- Drawers expose their panel as a dialog with `aria-modal`.
- The component sets initial focus when it opens and restores focus to the trigger when it closes.
Labels and content
- Use a title that describes the drawer task.
- Keep drawer content focused on one task or supporting flow.
Focus and interaction
- Place the primary action after the content it acts on.
- Avoid opening a drawer from another temporary overlay unless the flow requires it.
TabShift+TabEscHave suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.