Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Drawer

Drawers slide in from a container to expose additional options and information.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Open a side panel

Drawers reveal extra content or controls from the edge of the screen.

Keep context nearby

Use drawers for content that relates to the current page.

Support secondary tasks

Drawers work well for filters, settings, and supporting details.

Anatomy

Title Description Default slot content
1

Container

2

Title (optional)

3

Description (optional)

4

Slot (optional)

5

Scrim (optional)

6

Close button (optional)

7

Scrollbar (situational)

Configuration

Placement

Drawers slide in from any edge of the screen. Choose the edge that best matches the relationship between the drawer content and the page beneath it.

Click to open drawer demo
End drawer Slides in from the trailing edge.

Common for detail panels or settings.

Default placement, suitable for inspector and detail panels.

Size

Choose a size that matches how much content the drawer holds.

Click to open drawer demo
Small drawer Compact panel for short content.

Suits short actions or summaries.

Default compact size for short content.

Contained

Contained drawers stay within their parent surface instead of covering the full viewport.

Click to open drawer demo
Drawer title This drawer is positioned against the viewport.

Use the default viewport drawer for page-level tasks.

Footer slot

Use the footer slot for the primary actions that complete or dismiss the drawer task.

Click to open drawer demo
Review details Confirm the information before continuing.
Confirm Cancel

Use a footer when the drawer contains a task that needs actions.

Structure

Edit details Review the information before saving.

Drawers are useful for secondary tasks that need more space than a popover.

Cancel Save

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedPaddingsgds-padding-2-xl32pxSpace between the left and right edges of the component and its contentsgds-padding-2-xl32pxSpace between the top and bottom edges of the component and its contentsgds-padding-lg20pxPadding of the drawer header; padding of the contentsgds-padding-none—Bottom padding of the drawer headerGapsgds-gap-xs8pxSpacing between items of the drawer headerMarginsgds-margin-none—Outer spacing of the contentTypographysgds-font-size-24—Font size of the contentSizesgds-dimension-512—Width of the drawer panel; height of the drawer panel (small)sgds-dimension-768—Width of the drawer panel; height of the drawer panel (medium)sgds-dimension-1024—Width of the drawer panel; height of the drawer panel (large)Layersgds-z-index-modal—Stacking layer of the drawer fixed

Usage

When 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.

Best practices

Filter results Refine the list without leaving the page.

Adjust filters and apply them when you are done.

Reset Apply filters
Use a drawer for supporting tasks alongside the main page

Drawers work best for filters, settings, or detail panels. Users keep the page in view while they work.

Delete account This action cannot be undone.

Are you sure you want to permanently delete your account?

Cancel Delete account
Do not use a drawer for critical confirmations

Decisions that block progress or are irreversible belong in a modal, where users must respond first.

Booking details Reference number SG-20260427

Reviewing details on the right keeps the booking list visible.

Anchor the drawer to the edge that matches the content

Use end for detail panels, start for navigation, and bottom for mobile sheets so placement matches purpose.

Edit profile

Update your details below.

 Change password

Enter your new password.
Do not stack multiple drawers on top of each other

Opening a second drawer from inside another hides the first context. Resolve the current one first.

Edit details Update and save your changes.

Make changes to the form below.

Cancel Save changes
Provide a clear way to close the drawer

Include a footer action such as Save or Cancel, paired with the built-in close, so users have an obvious exit.

Submit a new application A multi-step form with eligibility checks.

This long task includes uploads, multiple steps, and a review screen.

Do not use a drawer when navigation would be clearer

If the content is a full task or page on its own, send users to a dedicated page instead of a drawer.

Accessibility considerations

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.

Keyboard interaction

KeyInteractionTabMoves focus from the drawer content to the next focusable element.Shift+TabMoves focus to the previous interactive element.EscCloses the open drawer when supported by the component.

Updates

DateVersionDescription05 Mar 2026v3.13.0Container paddings and examples in #556.12 Nov 2025v3.5.6Revert to percentages for width and height in #462.24 Oct 2025v3.5.5Set width and height to viewport width and height in #459.22 Sept 2025v3.4.0New size prop and footer slot in #380.

Roadmap

Planned itemStatusTargetFuture enhancements for drawerPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/drawer

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2