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

Dropdown

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Show extra actions

Use dropdowns to keep secondary actions or links available on demand.

Stay tied to a trigger

The menu opens from the control that launched it, keeping context clear.

Organise menu content

Use items, icons, and dividers to group related options.

Anatomy

Menu label Menu label Menu label Menu label
1

Action

2

Icon (optional)

3

Label

4

Container

Configuration

Drop direction

Drop direction controls where the menu opens relative to the trigger. Pick the direction with the most available space.

Open menu Profile Settings Sign out

Menu opens below the trigger. This is the default behaviour.

Menu alignment

Align the menu to the trigger's start or end. Use right alignment when the trigger sits near the trailing edge of the screen.

Open menu Profile Settings

Default alignment, menu lines up with the trigger's leading edge.

Auto-flipping

By default the menu flips to stay in view. Disable flipping when you need the menu to stay anchored in a fixed direction.

Open menu Profile Settings

Menu flips to the opposite side when there is not enough space.

Disabled

Disable the dropdown when the action is not currently available.

Open menu Profile Settings

Default state. The toggler opens the menu on click.

Item state

Dropdown items can show active or disabled states inside the menu.

Open menu Active item Default item

Use active to identify the currently selected destination or value.

Close behaviour

Use close behaviour to decide whether selecting an item should dismiss the dropdown menu.

Actions Archive Duplicate

Use close when selecting an item completes the menu interaction.

Structure

Actions Edit Duplicate Archive

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-lg20pxSpace between the left and right edges of the component and its contentsgds-padding-sm—Space between the top and bottom edges of the component and its contentsgds-padding-none—Padding of the dropdown itemsgds-padding-xs4pxTop and bottom padding of the dropdown menuGapsgds-gap-sm12pxSpacing between items of the dropdown item; spacing between items of the contentBordersgds-border-radius-md8pxCorner radius of the dropdown menusgds-nav-tabs-border-widthWidth variesOuter spacing of the dropdown menuSizesgds-dimension-192—Minimum width of the dropdown menusgds-dimension-320—Maximum width of the dropdown menusgds-dimension-480—Maximum height of the dropdown menusgds-mainnav-max-widthWidth variesMaximum width used by dropdown items in mainnav contextPaddingsgds-mainnav-mobile-padding-x—Horizontal padding used by dropdown items in mobile mainnav contextsgds-mainnav-padding-x—Horizontal padding used by dropdown items in desktop mainnav contextOutlinesgds-outline-focus—Focus outline of the dropdown item when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the dropdown item when keyboard-focusedLayersgds-z-index-floating—Stacking layer of the dropdown menu

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

More Item Item Item
Do not use vague item labels

Generic labels such as Item force users to read every option to find what they need.

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

DateVersionDescription13 May 2026v3.19.0Close prop to control menu closing for interactive dropdown behaviour in #625.29 Apr 2026v3.18.0Set max width on dropdown menu in #629.29 Apr 2026v3.18.0Allow slotted element to fill parent width via flex grow in #626.23 Mar 2026v3.15.0Menu position to target properly when open on initial … in #569.03 Sept 2025v3.3.1Dropdown Menu to flow outside of document flow @clukhei in #348.

Roadmap

Planned itemStatusTargetFuture enhancements for dropdownPlannedTBD

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/dropdown

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