Navigation ​

The Navigation (Header) component contains the global navigation of a website. It is a customizable component that allows for full content personalization to recreate any given situation of a navigation menu, including sections and expanded submenus.

overview of Header

Usage guidelines ​

When to use ​

  • To give users a permanently available user interface element
  • To allow users to navigate around the website or app.

Writing guidelines ​

  • Language The wording of the main navigation should be clear, descriptive and recognizable.

  • Text length Each item name should be short and clearly reflect the location or entity it links to. Text titles should be clear and short.

Header - Specifications ​

Anatomy ​

Header - Desktop and Tablet

Anatomy header desktop and tablet
  1. Burger Menu
  2. Link placeholder
  3. Search Icon
  4. Zurich Logo
  5. Drop shadow

Header - Mobile

Anatomy header mobile
  1. Burger Menu
  2. Zurich Logo
  3. Icon or Avatar
  4. Drop shadow (only for the rounded variant)

Size ​

Four different navigation sizes are available: Desktop, Tablet landscape, Tablet portrait and Mobile

sizes of Header

Mobile types ​

Mobile comes in three main different types: Logo, Text title and Isotype. They build up on each other. Text Title and Isotype should not be used alone.

mobile types of Header

Mobile variants ​

Each type of mobile header comes with several alignment, shape styles and heights options:

  • Default (56 px height) and White Space (96 px height).
  • Icon and Avatar.
  • Default or Rounded shape design available. The rounded version is mostly used for Apps.
Alignment ​

Logo variant

The Logo variant can be Center, Left or Right aligned.

Mobile header - Logo variant

Text title variant

The Text title variant can be Center or Left aligned.

Mobile header - text title variant

Isotype variant

The Isotype variant has only one default alignment.

Mobile header - isotype variant

Header (open) - Specifications ​

Anatomy ​

Size / Variants ​

There are four sizes of open navigation: Desktop, Tablet Landscape, Tablet Portrait and Mobile.

Desktop and Tablet landscape

Text styles for Desktop and Tablet landscape

Tablet portrait and Mobile

Tablet portrait and Mobile components have a different look and feel as they use a mobile navigation style and a hamburger menu for opening the navigation. Compared to Desktop and Tablet landscape, Tablet portrait and Mobile show the different navigation sections and links in a single column. The sections are shown in a collapsed state and can be expanded.

Text styles for Tablet portrait and mobile

Elements:

  • All open versions allow up to 8 sections
  • All open sections allow up to 8 links and 6 sub-links for Desktop and Tablet Landscape and 8 links for Tablet Portrait and Mobile.
  • They are divided by a scrollbar or divider.

At the bottom of the submenu, there is a list of useful links such as Privacy, Terms of Use and Cookies. The text of these links is editable.

Behavior ​

Positioning and alignment ​

Header is always the very first element at the top of a page. It stretches full width in every viewport.

States ​

Section header can be set in three different states: enabled, hovered and active.

Links can be set into two different states: Enabled and hovered

Scrolling ​

For all screen resolutions, the open Navigation components offer the possibility to add a scrollbar (with the scroll indicator which can be on top, medium or bottom of the scrollbar) and a background gradient when the user reaches the end of the page.

This is especially useful for the mobile submenu, in which the page can become very long. Desktop and Tablet Landscape will have this feature applied to the single column (not a single section) of the open submenu, while Tablet Portrait and Mobile will have one for the hole component.

The Scrollbar can be hidden, if not needed.

Scrollbar in header open