Breadcrumb

Component checklist

Overview

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

When to use

• When the page has more than two layers in a hierarchy.
• When you need to inform the user of where they are.
• When the user may need to navigate back to a higher level

When not to use

Breadcrumbs are always treated as secondary and should never entirely replace primary navigation. They shouldn’t be used for single-level navigation products because they create unnecessary clutter.

 

Anatomy

1. Main level (Overview) - Click to get to level 1. Most of the time, there is an overview. You can use the icon if there is no space on the viewport.
2. Current page - Displays the current page where you are. If there is a possibility of selecting more options on this page, we will place a select with the possibility of opening a dropdown. If this is the final state, we use only the headline.
3. List of options - The list is populated once a user clicks on the field and displays all possible actions the user can provide.

 

Variants

Soul defines three breadcrumb variants, two by style and one by placement.

By the style

• Link
• Icon

By placement

• In header

Link

The default variant of the breadcrumbs is used in most cases. Depending on the visual space, you can choose between several sizes.

Icon

This option is enabled only if breadcrumbs are used as a content headline and a part of the main navigation (Size H2). It is assumed that in certain cases, there may not be enough space for the full name, which in this variant is hidden in the tooltip after the icon has hovered over.

In header

In this case, breadcrumbs are visible only if the user hides the main navigation to keep still visible user's location and allow the user to get back to the previous or main location. This variant is used mainly in the header, and it appears under the headline.

 

Sizes and Placement

You can use different typo font sizes considering hierarchy.

1. Main - Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation but above the page title.
2. Secondary - Secondary breadcrumbs are placed in modals, panels, dialogues, and places where we want to tell the user where he is and how he can go back, but it is not the main way.
3. Tertiary and Additional - Users are found in the last level of navigation, such as dropdown, etc.

 

Overflow content

When space becomes limited, use an overflow menu to truncate the breadcrumbs. The first and last two page links should be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line.