Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

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
  • 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. Subnavigation is it´s own block in desktop view, and gets integrated on mobile viewport. The taxonomy structure is hierarchical, meaning tat it is based upon the structure of Episerver. If you add subnavigation 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 eachother that minimizes the hieght 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, as previously mentioned, 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 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

 

Subsections

Page last updated

Feedback

Was this page helpful?