Navigieren auf digital.sbb.ch

Zur Startseite von digital.sbb.ch

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 must be inserted in any application.

3. Rules

  • The header consists of an app chooser (optional, for application groups), surrounding banner (outside of prod), application name and version, main navigation (if necessary), display for messages (optional), user menu and logo.

4. Variants and statuses

4.1 Standard

This variant has following statuses:

  • Collapsed
  • Expanded
  • Hover
Image of the header module in the standard variant

Design specification

Code specification

4.2 Submenu

This variant has following statuses:

  • Collapsed
  • Expanded
  • Hover
Image of the header module in the submenu variant

Design specification

Code specification

4.3 Suite

This variant has following statuses:

  • Collapsed
  • Expanded
Image of the header module in the suite variant to navigate between applicaitons

Design specification

Code specification