Navigieren auf digital.sbb.ch

Beta

Header

1. What does the module do?

It provides the user with accessible information and functions at all times.

2. When should the module be used?

A header can be inserted in any webpage/any application.

3. Rules

  • When scrolling the navigation bar becomes the thinner sticky header.
  • Level 1 of the navigation in the sticky header is hidden and replaced with a Hamburger menu.
  • The header is expanded again in the default status when the Hamburger menu is clicked on.

4. Variants and statuses

The module has the following statuses:

  • Default
  • Collapsed

4.1 Standard

Image of the header module in the standard variant

Design specification

4.2 Microsite standard

Image of the header module for a microsite
  • sbb.ch home always appears first in the quick links.
  • The main navigation can be freely selected.
  • In addition to the login, the search is also shown.

Design specification

4.3 Microsite with its own logo

Image of the header module for a microsite with its own logo
  • If this header is used, the ‘footer microsite with its own logo’ must be used afterwards.
  • sbb.ch home always appears first in the quick links.
  • The main navigation can be freely selected.
  • In addition to the login, the search is also shown.

Design specification