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

Overflow menu

An overflow menu opens a menu with additional actions or options from a compact trigger.

GitHubGitHub logocomponents/overflow-menu
StorybookStorybook logocomponents/overflow-menu
DesignUsageAccessibilityUpdates

Purpose

Tuck away secondary actions

Overflow menus keep infrequently used or contextual actions out of the main UI, surfacing them only when the user asks.

Avoid crowding the interface

When a row, card, or list item has many possible actions, the overflow menu keeps the layout clean without hiding important primary actions.

Consistent trigger pattern

The three-dot icon is a well-established pattern — users know tapping it reveals more options without needing any instruction.

Anatomy

1

Trigger button

2

Menu

3

Menu item

Configuration

Default

The overflow menu collects secondary actions behind a three-dot trigger to keep the interface clean.

Edit Duplicate Delete

Renders a three-dot trigger that opens a contextual action list. Use in rows, cards, or compact layouts where displaying all actions inline would clutter the interface.

Playground

BETA
Edit Duplicate Delete

Structure

Edit Duplicate Delete

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: border-radius-sm under sgds/overflow-menu means sgds/overflow-menu/border-radius-sm.

sgds/overflow-menu
CategoryComponent tokenSemantic tokenValueBorderborder-radius-smsgds/border-radius/sm—Colourbg-translucent-subtlesgds/bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)bg-transparentsgds/bg-transparentTransparentSizedimension-24sgds/dimension/24—dimension-32sgds/dimension/32—Outline Focusoutline-focussgds/outline-focus—Outline Offset Focusoutline-offset-focussgds/outline-offset-focus—

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

Edit Duplicate Delete
Keep destinations clear

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

Accessibility considerations

Built-in accessibility

  • Overflow menus use the dropdown component internally.
  • Menu items support the same keyboard selection behaviour as dropdown items.

Labels and content

  • Use overflow menus for secondary actions.
  • Keep destructive actions clearly labelled.

Focus and interaction

  • The menu button should be reachable next to the item it affects.
  • Return focus to the menu button after the menu closes.

Keyboard interaction

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

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for overflow menuPlannedTBD

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/overflow-menu

Singapore Government Design System

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