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

Masthead

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

GitHubGitHub logocomponents/masthead
StorybookStorybook logocomponents/masthead
DesignUsageAccessibilityUpdates

Purpose

Mandatory for .gov.sg services

Every .gov.sg digital service is required to display the official government banner so users can verify they're on an authentic government website.

Establishes trust immediately

The masthead is the first thing users see — its standardised design signals official authenticity before users interact with any content.

Consistent across government

Using the same masthead across all .gov.sg services creates a unified experience that reinforces trust in the broader Singapore government digital ecosystem.

Anatomy

1

Government banner

2

Expandable details

Configuration

Default

The masthead is the mandatory Singapore Government banner that confirms authenticity for .gov.sg services.

Renders the mandatory Singapore Government banner. Place this at the very top of every .gov.sg service page so users can verify they are on an official government website.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: icon-size-sm under sgds/masthead means sgds/masthead/icon-size-sm.

sgds/masthead
CategoryComponent tokenSemantic tokenValueSizeicon-size-smsgds/icon-size/sm—Mainnav Max Widthmainnav-max-widthsgds/mainnav-max-width—Paddingmainnav-mobile-padding-xsgds/mainnav-mobile-padding-x—mainnav-padding-xsgds/mainnav-padding-x—

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

Keep destinations clear

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

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

  • 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

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for mastheadPlannedTBD

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

Singapore Government Design System

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