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.

Breadcrumbs

A breadcrumb is a secondary navigation showing the website hierarchy.

Guidelines

Short description

We use breadcrumbs to display site hierarchy (rather than navigation path) and to increase findability of parent pages.

Breadcrumbs help users navigate upward in the hierarchy and typically help with back-movement also. They also help with context when navigation is otherwise out of sight (for example in a mobile view).

Breadcrumbs have been proven to reduce bounce rates for search-users, when they are able to quickly find related pages.

When and how to use it

Use for sites/applications that have a substantial amount of pages present deeper down in site structures.

Behaviour

Desktop

The full path may not take up more than one row in the layout. If the path is too long the path is truncated after the root element (i.e. Home ... > Loans > Home > Interest ).

Mobile

For mobile views we only display the link to the parent page, as the full path tends to take too much space.

Specification

Desktop

Measurements

Typography

  • Font: 16px medium
  • Page-levels are separated with a Chevron (>)

States

  • Current state: Grey 800
  • Previous states, link: Dark blue 2
  • Chevron: Grey 800

 

Mobile

Measurements

  • Container & click area for the link: 44px high and 100% wide

Typography

  • Font: 16px medium
  • Only one level up is presented
  • Chevron (<) indicating back

States

  • Link: Dark blue 2
  • Chevron: Grey 800

Colours

  • Dark blue 2
  • Grey 800

Examples

Desktop

Mobile

Page last updated

Feedback

Was this helpful?