Navigieren auf digital.sbb.ch

Zur Startseite von digital.sbb.ch

Sidebar

1. What does the module do?

  • Provides direct access to contents and functions of applications or parts of applications.

2. When should the module be used?

  • For structuring and direct navigation to contents and functions.

3. Rules

3.1 Behaviour

  • On large screens (desktop and larger), the content area is reduced in width when the sidebar is expanded. For smaller screens (tablet, mobile), the content is covered by the expanded sidebar.

3.2 Layout

  • The height of the navigation bar corresponds to the height of the complete content area.

4. Variants and statuses

4.1 Plain

This variant has following statuses:

  • Default
Display of the sidebar in the plain version
  • The menu items can be divided into categories / areas.
  • For the categories you can choose between Accordion and Fieldset when using the sidebar.

Design specification

4.2 Icon bar

This variant has following statuses:

  • Collapsed
  • Collapsed Hover
  • Expanded
  • Expanded Hover
Display of the sidebar in the icon bar version
  • The default state (collapsed, expanded) can be defined per application.
  • If required, the navigation points can be grouped visually using separators.
  • By default, the first (top) navigation point should be active.

Design specification

4.3 Submenu

This variant has following statuses:

  • Collapsed
  • Expanded
Display of the sidebar in the submenu version
  • The default state (collapsed, expanded) can be defined per application.
  • The menu items can be divided into categories / areas.
  • For the categories you can choose between Accordion and Fieldset when using the sidebar.

Design specification