Navigation

An overview of the components used for navigation at public websites.

Overview

These are the components used for public website navigation:

  • Main menu for desktop, also called the mega menu
  • Main menu for mobile
  • Sequence indicator, also called the subway
  • Breadcrumbs
  • Footer

Taxonomy and main menu

Based on the taxonomy structure (terminology system), we use a so-called megamenu in desktop version and a “stepper” navigation for our sub-level links, to increase the choices for different target groups.

In the SEBxx concept, the vision is that sub-level links are inputs that takes the user directly to the relevant page (based on analytics, tests, etc).

Main menu

The mega menu is based on four columns, which means we may insert four segments / domains / areas in one width.

Each column contains a title and a link list:

  • The title is the name of the segment / domain / area but is not hyperlinked, whether there is a subpage or not.
  • The link list is not based on the taxonomy structure but, as previously mentioned, pages we can show on which draw traffic or high priority, based on internal requirements like SEO, campaign or other business related requirements.

Desktop

Mobile

Sequence indicator

Desktop

The sub-menu that exists today is what we call subway. Our subway is located on pages that are in a sequence. The component is so-called in-line which means that the component is located in the middle of content, in the right and last column of a 3-col and above fold to prompt the links directly when the user lands on the current page.

Example

https://seb.se/privat/lana/bolan-och-rantor/lanelofte-och-guide/kopa-eller-salja-bostad-forst

Mobile

The sub-menu that exists today is what we call subway. Our subway is located on pages that are in a sequence. The component is so-called in-line, which means that the component is located as first component in content. It is presented as a dropdown.

 

Breadcrumbs

Desktop

In the breadcrumbs for desktop we are presenting the full route - from the root of seb.se to the active page. We do link all previous pages except the active page because the breadcrumbs are highly used for navigating in the active hierarchical link structure.

Mobile

Unlike the desktop version where we present the complete routing, we only present the very previous page from the active page. This is more or less because of the small real estate we have to work with, but also a best practice approach for mobile usage.

 

Footer

Desktop and mobile