Navigieren auf digital.sbb.ch

Beta

Header

1. What does the module do?

  • The module is used for orientation and navigation.

2. When should the module be used?

  • The module appears on every page directly beneath the status bar.

3. Rules

  • The header consists of the navigation icon (‘menu icon’, ‘cross’ or ‘arrow to the left’), title and signet.
  • The ‘menu icon’ opens the menu.
  • The ‘arrow to the left’ navigates back to the previous page.
  • The ‘cross’ closes the page displayed.
  • The title describes the content of the function/page.
  • The signet is linked to the homepage.

4. Variants

4.1 Homepage with menu icon

Image of the header with menu icon
  • Can only be used on the homepage.

    Design Specification

  • iOS
  • Android

4.2 With arrow to the left

Image of the header with an arrow to the left
  • Is used when navigating within hierarchical levels.
  • The display of the function/page selected is animated from left to right.

Design Specification

4.3 With close icon

Image of the header with a close icon
  • Is used when not navigating in greater depth. e.g. in the menu.
  • The display of the function/page selected is animated from the bottom upwards.
  • When navigating from a page with a close icon, the header with the arrow to the left must be used on the next function/page.

Design Specification

1. What does the module do?

  • The module is used for orientation and navigation.

2. When should the module be used?

  • The module appears on every page directly beneath the status bar.

3. Rules

  • The header consists of the navigation icon (‘menu icon’, ‘cross’ or ‘arrow to the left’), title and signet.
  • The ‘menu icon’ opens the menu.
  • The ‘arrow to the left’ navigates back to the previous page.
  • The ‘cross’ closes the page displayed.
  • The title describes the content of the function/page.
  • The signet is linked to the homepage.

4. Variants

4.1 Homepage with menu icon

Image of the header with menu icon
  • Can only be used on the homepage.

    Design Specification

  • iOS
  • Android

4.2 With arrow to the left

Image of the header with an arrow to the left
  • Is used when navigating within hierarchical levels.
  • The display of the function/page selected is animated from left to right.

Design Specification

4.3 With close icon

Image of the header with a close icon
  • Is used when not navigating in greater depth. e.g. in the menu.
  • The display of the function/page selected is animated from the bottom upwards.
  • When navigating from a page with a close icon, the header with the arrow to the left must be used on the next function/page.

Design Specification