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

Overflow menu

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Hide secondary actions

Use overflow menus for actions users need less often.

Reduce visual crowding

Move extra row or card actions into the menu to keep the layout clean.

Use a familiar trigger

The three-dot trigger signals that more options are available.

Anatomy

Edit Duplicate Delete
1

Trigger button

2

Menu

Configuration

Size

Pick a size that matches the surrounding controls. Use small in dense lists and toolbars, medium for comfortable touch targets.

Edit Duplicate Archive

Default size with a comfortable touch target.

Item state

Overflow menu items can show active and disabled states.

Active item Default item

Use active for the currently selected item in the menu.

Item icon

Use item icons when they help users recognise menu actions quickly.

Edit Delete

Use icons for familiar actions where the icon reinforces the label.

Structure

Edit Duplicate Delete

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 usedSizesgds-dimension-32—Height of the overflow button; width of the overflow buttonOutlinesgds-outline-focus—Focus outline of the overflow button when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the overflow button when keyboard-focused

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 Archive
Use overflow menus for secondary or contextual actions

Tuck infrequent or row-level actions behind the overflow trigger so primary actions stay visible.

Submit application Save draft Discard
Do not hide the primary action inside an overflow menu

Surface the most-used row action directly, hiding it behind the menu adds an extra step.

Rename Move to folder Download
Keep menu items short and verb-led

Use short verb-led phrases so users can scan the available choices. Match the wording to the outcome.

Edit Duplicate Archive
Match the trigger size to the surrounding controls

Use small in dense rows or toolbars, and medium when it shares space with full-size buttons.

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

DateVersionDescription

Roadmap

Planned itemStatusTargetFuture enhancements for overflow menuPlannedTBD

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

Past VersionsSGDS v1SGDS v2