The SDX Header is composed of three navigation areas: meta, main and breadcrumbs.
The meta navigation hosts secondary links and is divided into three sections:
- Left section: shows the overarching company and website related links such as business areas, Brand Center etc.
- Right section: shows contact and language selection.
The main navigation represents the top-level topics of the website and is divided in two sections:
- Left section: hosts the logo and the top-level navigation.
- Right section: hosts the utilities section with functionalities like search, basket, application switcher or login.
The breadcrumbs are located below the main navigation on desktop, while on mobile the orientation is reflected via an open menu. The breadcrumbs will only be displayed when the main navigation has three levels or more.
<sdx-header
navigation='{
"primary": { … },
"secondary": { … },
"tertiary": { … },
"main": { … }
}'
></sdx-header>
See HTML example at samples/header.
Hierarchy
The main navigation hierarchy features up to five possible levels for subcategories. The horizontal level 1 navigation is the default layout for all digital products.
Level 2 and level 3 navigation items will be shown in a "mega dropdown" menu by default. These can be subdivided into categories to house similar themes together.
The navigation offers the possibility to display level 2 and 3 navigation items also as a left-hand navigation.
A combination of the "mega dropdown" menu and the left-hand navigation can be chosen if up to 5 levels are required.
Menu
The "mega dropdown" supports descriptive text for navigation items and cards for links with images. If you only include a small number of links consider adding a description. Do not exceed 50 characters for each link text and its description. See samples/header.
Mobile Menu
On mobile, the meta and main navigations are collapsed into a global navigation and visualized as a hamburger menu.
Left-hand navigation
The left-hand navigation can be used when there’s a high number of links and when users are required to often switch between them.
Utilities section
The service links in the utilities section are offered as icon buttons. Each icon button opens a flyout with customizable content. The flyout for the utilities section has a fixed width by default, but can be set to be displayed full bleed with its content placed inside the grid.
Login and Logout Flyout
- The login flyout contains a sign-in button and provides a set of links to reference common use cases.
- The logout flyout contains profile data, a sign-out button, and provides a set of links to indicate notifications and references common use cases.
- Optionally, the link lists can be separated into sections by dividers and labels.
- Keep labels short (max. 20 characters) and avoid overloading the link sets (max. 4).
Application switcher
The application switcher ensures quick access to useful Swisscom applications and services. The number of icons and links should be optimized for the mobile viewport to avoid scrolling.
Behaviour
Responsiveness
The responsiveness of the header is ensured on all devices thanks to a fluid layout. Below the breakpoint 1024px, the navigation links are displayed as a hamburger menu.
The behaviour can be seen on samples/header.
Sticky header
During scrolling of a page, the sticky type will automatically appear and hide the meta navigation as well as the breadcrumbs. On mobile, the header always remains fixed at the top.
Pride month at Swisscom
During the pride month (each June), the logo will switch automatically to the Swisscom rainbow logo.
