Global Header
This global header is designed to apply one navigation layout to all main digital customer facing applications within If.
Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Table of Contents
Edit this section, Opens in new windowOverview
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.
Usage
Global controls
The global controls-section is a section that contains top level controls.
- Global 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
- Private business area
- Company business area
- Large/Industrial business area
Language selector
- The language selector is optional, but used whenever the current application has support for it
Login 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.
Open pages
The global header in Open Pages..
States
The global header in Open pages has two "states", when the user is not logged in, and when the user is logged in.
Open pages
Open pages logged in
Anatomy
- Global controls
- Active business area
- Inactive item
- Change language (optional)
- Log in (optional)
- Main navigation
- Logo
- Expandable section
- Search (optional)
- Shopping cart (optional)
- Log out button
- My pages menu
- Login options
- Show shortcut menus
- Shortcut
- Showcase
- Activated switch for shortcut menus
- Shortcuts menu
- Logo
- Shopping cart (optional)
- Sign in button
- Mobile menu
- Search
- First level
- Language switcher (optional)
In mobile view, the search in the menu is always visible
- Second level
- Third level
- Product icon
- Fourth level
- Login options
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.
My pages
The global header in My Pages..
Anatomy
- Back to start
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.
- My Pages menu element
The menu element is marked active when you are in the My Pages domain.
- Private sub menu
The private sub menu is default open when the user is in the My Pages domain
My Business
My Business
Anatomy
- Company selector
- Expanded company selector
- 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.
- My Business menu element
The menu element is marked active when you are in the My Business domain.
When the user has access to multiple applications
- Expanded application menu
- Expanded choose company selector
- 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.
When the user only has access to My Business
- Expanded application menu
- Expanded choose company selector
- Expanded My Business navigation
When the user only has access to My Business, the only navigation shown is for My Business.
- Company sub menu
The company sub menu is default open when the user is in the My Business domain
Co-branding
Co-branding
Anatomy
- Co-branded logo
Co-branding
- Co-branded logo
Without If logo
Search
Open pages
The search in the Global Header is based on the Search Field component and the Autocomplete component. The markup is the same, but the styling is altered to fit into the Global Header.
Behaviours
When the user opens the search, the focus should be set in the search field.
When the user closes the search (not searching), the focus should be set back to the search action control.
Anatomy
Open pages
- Search field
- Close search
- Quick links
Open pages
- Search field
- Quick links