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
• Subnavigation
• 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 mobile viewport. The sub navigation is it's own block in desktop view, and gets integrated on mobile viewport.

The taxonomy structure is hierarchical, meaning that it is based upon the structure of Episerver. If you add sub navigation to a page, it will automatically show the lower levels of that node and the children of those levels etc, down to a maximum of three levels beyond the page the block is added to. 

Main menu

The mega menu is based on four columns, depending on the width of the viewport. When the viewport gets smaller, the clusters of links will fit in a way under each other that minimizes the height needed by the menu. Once we get to a small viewport, the menu is transformed to a hamburger menu that works in a more sequential manner.

Each cluster 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 on what pages we can show draw traffic (through analytics), or that are 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 also the "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