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

Dropdown

Dropdowns reveal a list of contextual actions or links from a single trigger.

GitHubGitHub logocomponents/dropdown
StorybookStorybook logocomponents/dropdown
DesignUsageAccessibilityUpdates

Purpose

Reveal actions on demand

Dropdowns keep secondary actions hidden until needed, reducing visual clutter without making options hard to reach.

Anchor to a trigger

The dropdown always opens relative to its trigger — users know exactly where it came from and where to dismiss it.

Flexible content inside

Dropdown menus can contain plain links, actions, icons, or dividers — composing a list that fits the context.

Anatomy

1

Toggler

2

Menu

3

Menu item

Configuration

Default

Dropdowns reveal a list of contextual actions or links anchored to a trigger element.

Actions Edit Duplicate Archive

Renders a menu of contextual options anchored to a trigger. Use when a set of related actions or links should be hidden until the user explicitly opens them.

Playground

BETA
Actions Edit Duplicate Archive

Structure

Actions Edit Duplicate Archive

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-lg under sgds/btn means sgds/btn/padding-lg.

sgds/dropdown
CategoryComponent tokenSemantic tokenValuePaddingpadding-lgsgds/padding/lg20pxpadding-nonesgds/padding/none—padding-smsgds/padding/sm—padding-xssgds/padding/xs4pxGapgap-smsgds/gap/sm12pxBorderborder-radius-mdsgds/border-radius/md8pxColourcolor-defaultsgds/color-default#1A1A1Asurface-defaultsgds/surface-default#FFFFFFbg-translucent-subtlesgds/bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)bg-transparentsgds/bg-transparentTransparentprimary-color-defaultsgds/primary/color/default—Sizedimension-192sgds/dimension/192—dimension-480sgds/dimension/480—Opacityopacity-50sgds/opacity/50—

Usage

When to use

  • Use this component to help users understand where they are and move confidently to the next place.
  • Use it when the navigation pattern matches the scale of the journey and the relationship between destinations.

When not to use

  • Do not use this component when the page does not need another layer of navigation.
  • Do not add vague, repetitive, or competing labels that make the path harder to understand.

Best practices

Actions Edit Duplicate Archive
Keep destinations clear

Short, specific labels and a clear current state help users move through the interface with confidence.

More Item Item Item
Do not compete with the page structure

Repeated or unnecessary navigation patterns make it harder to understand where to go next.

Accessibility considerations

Built-in accessibility

  • Dropdowns expose their menu with menu semantics.
  • Dropdown items are focusable menu items and support keyboard selection.

Labels and content

  • Use dropdown items for related actions or navigation choices.
  • Keep item labels short and action-oriented.

Focus and interaction

  • Focus should move through the toggler and menu items in a predictable order.
  • Return focus to the toggler when the menu closes.

Keyboard interaction

KeyInteractionTabMoves focus from the dropdown to the next focusable element.Shift+TabMoves focus to the previous interactive element.↓ Downor↑ UpOpens the dropdown menu or moves focus between available options.EnterActivates the focused focused option.EscCloses the open dropdown when supported by the component.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for dropdownPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/dropdown

Singapore Government Design System

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