Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Navigation Info

What does the component do?

The navigation component displays a list of navigation links that help users to navigate through the various areas of a website or application. This is displayed as an overlay and is hidden behind a hamburger menu.

When should the component be used?

  • To provide users with a clear and accessible way to navigate through the website or application.
  • When compact navigation is required.


  • The navigation should be hidden behind a hamburger icon and placed as the first element in the header.
  • The navigation links should be logically grouped and arranged in a sensible order.

Child Components

Anatomy of the component
Number Type Description Optional Info
1 Component sbb-navigation-marker No
1a Component sbb-navigation-link oder sbb-navigation-button No
2 Component sbb-navigation-section No
3 Text Label No
4 Component sbb-navigation-list No
4a Text Label No
4b Component sbb-navigation-link oder sbb-navigation-button No
5 Component sbb-transparent-button No


Long Content
With Navigation Section
HTML-Markup kopiert.

The sbb-navigation component provides a way to present a navigation menu.

Some of its features are:

  • uses a native dialog element;
  • creates a backdrop for disabling interaction below the navigation;
  • disables scrolling of the page content while open;
  • manages focus properly by setting it on the first focusable element or the first action with the .sbb-active class;
  • can act as a host for components as sbb-navigation-list,
    and sbb-navigation-section;


To display the sbb-navigation component you can either provide a trigger element using the trigger property,
or call the open() method on the sbb-navigation component.

<!-- Trigger element -->
<sbb-button id="nav-trigger">Navigation trigger</sbb-button>

<!-- Navigation component with navigation sections -->
<sbb-navigation trigger="nav-trigger">
    <sbb-navigation-button aria-current="page" id="nav-section-1">Label 1</sbb-navigation-button>
    <sbb-navigation-button id="nav-section-2">Label 2</sbb-navigation-button>
    <sbb-navigation-link href="https://www.sbb.ch/some/route">Label 3</sbb-navigation-link>

    <sbb-navigation-button aria-pressed="true">Language 1</sbb-navigation-button>
    <sbb-navigation-button aria-pressed="false">Language 2</sbb-navigation-button>
    <sbb-navigation-button aria-pressed="false">Language 3</sbb-navigation-button>

  <sbb-navigation-section trigger="nav-section-1">
    <span slot="label">Title 1</span>
      <span slot="label">Label 1.1</span>
      <sbb-navigation-link href="...">Label 1.1.1</sbb-navigation-link>
      <sbb-navigation-link href="...">Label 1.1.2</sbb-navigation-link>
      <sbb-navigation-link href="...">Label 1.1.3</sbb-navigation-link>


On opening, the focus will be automatically set on the first focusable element or the first action with the .sbb-active class and, if the action with this class has a connected section, the section will be opened and the focus will be set on the first focusable element or the first action with the .sbb-active class in the section.
When a navigation action is marked to indicate the user is currently on that page, aria-current="page" should be set on that action.
Similarly, if a navigation action is marked to indicate a selected option (e.g., the selected language) aria-pressed should be set on that action.


Name Attribute Privacy Type Default Description
accessibilityCloseLabel accessibility-close-label public | string | undefined This will be forwarded as aria-label to the close button element.
activeNavigationSection - public HTMLElement | null null
trigger trigger public string | HTMLElement | null null The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element.


Name Privacy Description Parameters Return Inherited From
close public Closes the navigation. void SbbOpenCloseBaseElement
open public Opens the navigation. void SbbOpenCloseBaseElement


Name Type Description Inherited From
didClose CustomEvent<void> Emits whenever the sbb-navigation is closed. SbbOpenCloseBaseElement
didOpen CustomEvent<void> Emits whenever the sbb-navigation is opened. SbbOpenCloseBaseElement
willClose CustomEvent<void> Emits whenever the sbb-navigation begins the closing transition. Can be canceled. SbbOpenCloseBaseElement
willOpen CustomEvent<void> Emits whenever the sbb-navigation begins the opening transition. Can be canceled. SbbOpenCloseBaseElement

CSS Properties

Name Default Description
--sbb-navigation-z-index var(--sbb-overlay-default-z-index) To specify a custom stack order, the z-index can be overridden by defining this CSS variable. The default z-index of the component is set to var(--sbb-overlay-default-z-index) with a value of 1000.


Name Description
Use the unnamed slot to add sbb-navigation-button/sbb-navigation-link elements into the sbb-navigation menu.
Imprint Contact Cookie settings