Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Components

Components

AccordionAlertAppnavBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxData tableDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Appnav

App navigation is designed for applications such as dashboards, consoles and management systems, where users perform tasks or manage information. It provides branding, common actions and access to the user profile.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Support app workflows

Provides consistent navigation for applications where users perform tasks or manage information.

Access common actions

Keeps common actions, including help and notifications, accessible throughout the application.

Access user accounts

Provides consistent access to profile information and account actions throughout the application.

Anatomy

Singapore Government Design System
1

Start slot (default menu)

2

Logo slot

3

Dark mode

4

Icon slot

5

Container

Configuration

Tone

Brand is the default tone and uses your application’s primary brand colour. You can also choose from four SGDS gradient backgrounds.

Singapore Government Design System

Solid primary surface colour.

Menu

Include a menu button when the application has a side menu via the start slot. Omit it when users do not need a side menu.

Singapore Government Design System

Icon slot

Add icon buttons for application actions such as dark mode and notifications. Each icon button needs an accessible label.

Singapore Government Design System

Profile

Use sgds-appnav-profile in the profile slot to show user details and account actions. On desktop, the profile opens a dropdown. On smaller screens, the avatar opens a separate panel that works independently of the three-dots action menu.

Singapore Government Design System

Brand and action buttons without a user profile.

Action menu

Below the configured collapse breakpoint, action icon buttons become text items in a three-dots menu. Each item uses the button’s ariaLabel. Selecting an item activates its original action and closes the menu.

Singapore Government Design System

This example uses expand=always to keep the icon buttons visible.

Structure

Singapore Government Design System

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-mainnav-height72px (fallback)Minimum bar height; the component uses 72px when the token is not definedsgds-dimension-40Height variesHeight of the brand linkPaddingsgds-mainnav-padding-x—Horizontal padding at viewport widths of 1024px and abovesgds-mainnav-mobile-padding-x—Horizontal padding below 1024px; also used by collapsed action itemssgds-padding-sm—Vertical padding of each action in the collapsed menuGapsgds-gap-xl—Gap between the expanded bar sectionssgds-gap-xs8pxGap between actions, start-slot controls and collapsed bar sectionsTypographysgds-font-size-label-sm—Text size of collapsed action labelsOutlinesgds-outline-focus—Visible outline for keyboard focussgds-outline-offset-focus—Offset of the keyboard focus outlineLayersgds-z-index-floating—Stacking layer of the bar and collapsed-menu panel

Usage

When to use

  • Use the app navigation for operational applications where users perform tasks, manage information or work through ongoing workflows.
  • Use it when the application header needs to accommodate controls and utilities, such as icon buttons and a user profile, within a flexible application layout.

When not to use

  • For public-facing websites with text-based top-level navigation, use mainnav instead.
  • For secondary navigation within a section, use subnav or sidenav instead.
  • For navigation that uses sgds-mainnav-item or sgds-mainnav-dropdown, use mainnav instead. These components are not supported inside Appnav.

Best practices

Singapore Government Design System
Keep actions relevant across the application

Use the app navigation for common actions that users may need from anywhere in the application, such as help or notifications.

Singapore Government Design System Create project
Don’t include page-specific actions

Keep actions that only apply to a particular page, such as “Create project” or “Save changes”, within the page itself.

Singapore Government Design System
Use clear and familiar icons

Choose icons that users can easily recognise, and provide accessible labels so their purpose remains clear when the navigation collapses on smaller screens.

Singapore Government Design System
Don’t overcrowd the navigation

Avoid adding too many actions or destinations. Keep the app navigation focused on the most important controls users need across the application.

Singapore Government Design System Account detailsPreferencesSign out
Keep profile actions user-related

Use the profile menu for information and actions related to the signed-in user, such as account details, preferences and signing out.

Singapore Government Design System ProjectsReportsCreate project
Don’t use the profile menu as general navigation

Avoid placing unrelated application pages or actions in the profile menu. Keep it focused on the user’s identity, account and preferences.

Accessibility considerations

Built-in accessibility

  • Collapsed actions use the icon buttons' ariaLabel text as their labels.
  • When the collapsed action menu is open, Tab from the three-dots toggle focuses the first action.
  • A profile with no menu items is read-only and has no focusable toggle.

What you need to do

  • Set ariaLabel on every icon-only action. Appnav also uses this text for the collapsed action labels.
  • Set ariaLabel on the profile toggle, such as Profile menu.
  • Give the brand image meaningful alternative text and set brandHref to the application's home page.
  • Use variant=ghost and tone=fixed-light for icon buttons.

Keyboard interaction

KeyInteractionTabMoves through visible interactive controls. When the action menu is open, moves from the three-dots toggle to its first action. In the open desktop profile dropdown, cycles forwards through available items, wrapping to the first.Shift+TabMoves backwards through controls. From the first collapsed action, returns to the three-dots toggle. In the open desktop profile dropdown, cycles backwards through available items, wrapping to the last.EnterFollows the brand link or activates a focused button or menu action. On the mobile profile toggle, opens or closes its panel.SpaceActivates icon buttons, the desktop or mobile profile toggle, and collapsed action items. Does not activate the brand link or profile menu items.↓ Downor↑ UpOpens or moves between items in the desktop profile dropdown. The collapsed action menu and mobile profile panel use Tab navigation instead.EscapeCloses the desktop profile dropdown and returns focus to its toggle. Appnav v3.28.0 does not implement Escape-to-close for the collapsed action menu or the mobile profile panel.

Updates

DateVersionDescription24 Sept 2026v3.29.0Sanitise forwarded href in #834.17 Sept 2026v3.28.0New sgds-appnav, sgds-mainnav-profile, sgds-appnav-profile subcomponents, new readonly prop for DropdownItem in #800.

Roadmap

Planned itemStatusTargetFuture enhancements for appnavPlannedTBD

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

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