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

Masthead

All .gov.sg digital services shall adopt the Official Government Banner at the top of every page.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Identify government services

The masthead shows the official government banner at the top of the page.

Build immediate trust

A standard banner helps users recognise an official Singapore Government service.

Stay consistent across services

Use the same masthead pattern across pages and services.

Anatomy

1

Icon (Merlion)

2

Label

3

Link

4

Container

5

Expanded container

Configuration

Container width

Use the default constrained masthead container so it aligns with the standard page shell.

Default. Content is bounded by the standard SGDS container max-width.

Structure

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 usedMainnav Max Widthsgds-mainnav-max-width1440pxMaximum width of the masthead containerPaddingsgds-mainnav-mobile-padding-x—Left and right padding of the masthead container (mobile)sgds-mainnav-padding-x—Left and right padding of the masthead container (desktop)Sizesgds-icon-size-sm—Size of the masthead external-link icon

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

Place the masthead at the very top of every page

Render the official banner on every page, ahead of branding or navigation, so users can verify the site.

Slot content
Home
Do not omit the masthead on .gov.sg services

Skipping the banner, even on internal flows or success screens, undermines the trust signal users rely on.

Slot content
Home
Match the masthead width to the page shell

Use fluid when the app shell is full-bleed, and constrained when the navigation below is constrained too.

Do not restyle or override the banner

The masthead is a standardised government identifier. Do not change its colours, copy, or layout.

Accessibility considerations

Built-in accessibility

  • The masthead includes a disclosure control for the official government banner content.
  • The disclosure control supports keyboard activation.

Labels and content

  • Keep the masthead content unchanged unless product guidance says otherwise.
  • Do not place page-specific actions inside the masthead.

Focus and interaction

  • Users should be able to open the masthead information and continue through its links.
  • Keep focus order consistent with the page header.

Keyboard interaction

KeyInteractionTabMoves focus from the masthead disclosure to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused masthead disclosure.SpaceActivates the focused masthead disclosure.

Updates

DateVersionDescription04 May 2026v3.18.1Provide fallback value for icons size and all variable… in #640.05 Mar 2026v3.13.0Remove role banner and aria label for accessibility fix in #561.02 Mar 2026v3.12.0Background color in #554.03 Feb 2026v3.9.0Fluid prop to disable max-width in #540.02 Feb 2026v3.8.1Remove scam alert message in #534.

Roadmap

Planned itemStatusTargetFuture enhancements for mastheadPlannedTBD

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

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