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.

Cluster navigation

Cluster navigation lets users to explore and switch between different content in our channels.

Cluster navigation


Short description

The cluster navigation is tied to the main navigation structure and clusters (organises) pages that belong to the same level. The component used to be called tab navigation.

When and how to use it?

Use the cluster navigation organise groups of content at the same level of hierarchy. Each tab should contain content that is distinct from other tabs.


The tabs have the same design and functionality in all devices. If there are too many tabs for the page, there will be a horizontal scrolling in the tab navigation area. A white shadow will appear which makes it look like it's fading out to the side. You can swipe the navigation to see more tabs.

Relation to H1

When using cluster tabs, the H1 will be dynamic and depend on the cluster navigation label. However, it does not have to be identical to the tab label.


Behaviour in desktop

Behaviour in mobile

Behaviour in mobile

Do's and don'ts

  • Use cluster navigation to navigate between groups of content.
  • Try to keep the number of tabs low, preferably fewer than four.
  • Summarize the content in a good way, ask a ux-writer for advice.
  • Don't add an icon to enhance the understanding of a label.
  • Don't use sub-headings under tab labels.


Desktop example

Desktop example

Mobile example

Mobile example










Page last updated


Was this helpful?