Back to components

Global Header

This global header is designed to apply one navigation layout to all main digital customer facing applications within If.

Table of Contents

Edit this section, Opens in new window

Overview

The global header is a project that spans several years and has involved all major digital applications.

The goal is to introduce one seamless digital experience for our customers and users across applications through one component that would server the Open Pages and multiple of other application needs.

Edit this section, Opens in new window

Usage

The If Design System will provide the styling needed to implement the new global header and basic navigation behaviors and animations.

It will also provide JavaScript implementation examples for showcasing behavioral elements within the navigation. Note that the JavaScript is a very crude and basic setup that is not meant to be copied, but needs to be adapted and perfected for each application.

Global controls

The global controls-section is a section that contains top level controls.

Desktop

A navigation to the different business areas, language selector (optional), sign in, sign out, and the application menu, depending on access to the application and if the user is signed in or not

Mobile

In the mobile view, the entire header is merged into one section, where this section contains the logo, shopping cart (optional), application menu and the rest of the global navigation for open pages.

Business areas

Business areas
  1. Private business area
  2. Company business area
  3. Large/Industrial business area

Language selector

Language selector
  1. The language selector is optional, but used whenever the current application has support for it

Login button

Log out button

Log out button
Log out button

Component elements

Note that the content in the demo examples (application specific menu links) is to showcase placement of elements and is not dictating each specific menu link setup for each application.

Some elements in the navigation are mandatory and some are optional – dependent of the application needs and existing functionality:

  • Sticky navigation – The navigation is shown at the top and disappears upon scroll downwards. If the user starts to scroll up again the navigation appears. This functionality/behavior is optional and mainly to be applied to applications that have long pages where the users scrolls to a larger extent.
  • Shopping cart – Placement of the cart is mandatory if the functionality is used within an application on site, however as noted – to show and use the element/icon for shopping cart is optional. If an application doesn't apply that function today, it can hide/omit the icon for shopping cart.
  • Sticky price bar – Should be attached beneath the main global navigation if used.
  • Search icon – Placement of the search icon and function is mandatory if the functionality is used in the application today. If not, then the icon can be hidden.
  • Language selector – Placement of the language selector icon/functionality is mandatory if the functionality exists and is used in the application today. If not, then the icon can be hidden.
  • Log out link to be shown both in top level and in the dropdown menu of the application

Sticky navigation

Thin line on the bottom of the navigation when the user has scrolled down and then starts to scroll up again.

No line under navigation when the user is at the top again.

The global header is not sticky by default, but only appears fixed to top when user scrolls up.

Application teams have the freedom to choose implementation / toggle on and off the fixed global header in different contexts and page layout types = make it sticky where it helps the user and use the normal header in other pages where focus on content is more important.

Edit this section, Opens in new window

Open pages

The global header in Open Pages..

Open Pages is the non-application pages the users see on If.xx

States

The global header in Open pages has two "states", when the user is not logged in, and when the user is logged in.

Not logged in
Logged in

Anatomy

Open pages
  1. Global controls
  2. Active business area
  3. Inactive item
  4. Change language (optional)
  5. Log in (optional)
  6. Main navigation
  7. Logo
  8. Expandable section
  9. Search (optional)
  10. Shopping cart (optional)
Open pages logged in
  1. Log out button
  2. My pages menu
Expanded log in menu
  1. Login options
Open pages, expanded third level
  1. Show crosslink menus
  2. Crosslink
  3. Showcase
Open pages, expanded crosslinks
  1. Activated switch for crosslink menus
  2. Crosslink menu
Mobile header
  1. Logo
  2. Shopping cart (optional)
  3. Sign in button
  4. Mobile menu
Mobile menu
  1. Search
  2. First level
  3. Language switcher (optional)
Search

In mobile view, the search in the menu is always visible

Mobile menu
  1. Second level
  2. Third level
  3. Product icon
  4. Fourth level
Mobile header expanded login menu
  1. Login options
Mobile header logged in, expanded logged in menu

If logged in to for instance My Pages and jumping back to Open Pages – the "Mina Sidor"-link will open the dropdown with links to all portals.

Login page
Edit this section, Opens in new window

My pages

The global header in My Pages..

My Pages is the pages for the users personal insurances.

Anatomy

My pages global header
  1. Back to start
Back to start element

The back to start element will link to corresponding business area start page. Meaning My Pages link to if.no/privat, My Business links to if.no/bedrift etc.

Mobile header in My Pages

  1. My Pages menu element
My Pages menu element

The menu element is marked active when you are in the My Pages domain.

My pages, expanded my pages menu

Open pages menu in My Pages

  1. Private sub menu
Private sub menu

The private sub menu is default open when the user is in the My Pages domain

Edit this section, Opens in new window

My Business

Anatomy

My Business
  1. Company selector
My Business
  1. Expanded company selector
  2. Show all companies

Show all companies

This menu item will take the user to a separate page within My Business where the user can see all available companies to choose from.

Mobile header in My Business
  1. My Business menu element

My Business menu element

The menu element is marked active when you are in the My Business domain.

Mobile header

When the user has access to multiple applications

  1. Expanded application menu
  2. Expanded choose company selector
  3. Expanded My Business navigation
Expanded My Business navigation

The application menu for the current application is always placed on bottom, under the other applications that the user has access to.

Mobile header

When the user only has access to My Business

  1. Expanded application menu
  2. Expanded choose company selector
  3. Expanded My Business navigation
Expanded My Business navigation

When the user only has access to My Business, the only navigation shown is for My Business.

Open pages menu in My Business
  1. Company sub menu

Company sub menu

The company sub menu is default open when the user is in the My Business domain

Edit this section, Opens in new window

Co-branding

Co-branding

Anatomy

Desktop co-branding header
  1. Co-branded logo
Mobile co-branding header
  1. Co-branded logo

Without If logo

Edit this section, Opens in new window
Contact us, Opens in new window