Breadcrumbs UI design tips

Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.

The relevant content for Breadcrumbs is a link, a separator, and an icon. Link is a key component here, to allow user to navigate the app and quickly roll back to a highest level of navigation hierarchy.

• Link — to initiate the action
• Separator — to visually divide links
• Icon — for additional functions, or increase link magnitude

Breadcrumb's common item is a link element, dedicated for users to interact with by clicking.

Putting each link into a container allows you to set indents to perform some CSS styling. Moreover, you will expand the clickable spot and make it easier for users to hit the link.

Breadcrumbs separator is a small icon between links which is used to visually divide the content and reveal app levels sequence by showing direction from left to right (except in RTL interfaces).

The most frequent separation pictograms utilized in Breadcrumbs are: Chevrons, Carets, Slashes and sometimes Arrows and even Colons (web's early days).

Together with links in Breadcrumbs, icons may assist to distinguish the identification of each link faster. Use just a solo icon without caption, or assemble icon with link label.

In single-icon mode, set on hover tooltips to help recognize what's behind the icon, especially when a pictogram is not familiar for the users.

Active Breadcrumb clearly indicates the current in-app location and the last level of hierarchy. It's recommended to highlight Active state by a darker or bolder font to male it obvious for a user where he is now.

Active link must be not clickable as we can't let to re-enter a section where user is already browsing the app.

Onhovered Breadcrumb points for a user the area for upcoming click. By defaults, this state highlights a link with underline CSS properties, but sometimes it's more convenient to outline the whole container where the link sits (e.g. Home icon):

Disabled Breadcrumb exhibits a cursor with blocked sign when it's rolled over the unavailable link. With reduced transparency it's positioned as inactive among other links, but still visible to stick the hierarchy:

Focused Breadcrumb reveals an outline stroke wrapping the link container, after user was interacted with it recently:

Breadcrumbs component is a visually simple UI element. There are not so many opportunities and purposes to redesign it, except colors and smooth link container adjustments to add some tiny UI details:

In user interfaces the most of Breadcrumbs are placed over white surfaces. When your dashboard background is slightly colored you can adjust a Breadcrumb theme too in order to have a harmonic layout of UI elements:

Apply colors when required. To themify Breadcrumbs you have to swap colors for text, separator, link container. Through a design system styleguides, you may set a color token labeled with the following numbers:

• Default link — 50 or 60 (e.g. Blue-50)
• Active link — 80 or 90
• Separator — 30 fits fine!
• Background — 0 (white) or 5

There are several of parameters to modify for a Breadcrumb link container to visually enhance it or make it more usable:

• background
• corner radius
• outline stroke

Background fill of a link container may be required to show Breadcrumb as ready to action, e.g. after on hovering the cursor. Attaching a tiny shadow here makes a Breadcrumb item look like a clickable button:

Corner radius adjustment is a rare case (e.g. MUI declares it) mainly required to fit to the aesthetics of your UI shapes to make the interface looks whole:

Outline stroke is a container theme required for prompting a Focused state for Breadcrumbs. However, in some UI design approaches it could be used to diversify Onhover / Active styles.

Border, wrapped around a Breadcrumb container, remains a user that specific section is selected (Active state of the last hierarchy level):

A solid rule about Breadcrumbs – first link is always leads to a first-level (e.g. home screen, dashboard, shopfront, timeline), where users start their app journey.

For revealing addition actions in Breadcrumbs a popover menu might be implemented. You can use it at any highest hierarchy level to save user's clicks when navigating through an application, or execute additional actions related to this link:

Take in consideration here an onHover event is the best way to expand a menu, however onClick is also a good fit, but requires one more users' action to execute:

Truncation appears useful when there is a Breadcrumb component become overflowed due to insufficient screen width (e.g. on mobiles), or overloaded with links.

Truncate several links in the middle when there is no room to fit many of Breadcrumbs at the current screen resolution. As mentioned above, reveal the content with popover menu with additional actions:

Truncate link names in case a Breadcrumb contains extra long caption. Show tooltips after a tiny delay (0.2s), which uncover the full name when a link is on hovered:

There is an alternative approach to truncate Breadcrumb items from the highest levels and aggregating them under a popover menu. Collapse links in hierarchical order, leaving visible only the closest level (or two) to user's current in-app location:

Suitable to use when a Breadcrumb component has been scaled down from desktop to mobile, and you have many links to hide when there is no screen sufficient width for them to fit:

Breadcrumb element equipped with close icon to reset page attributes, e.g after some filtering parameters were applied for the current page:

To signal a user there is a new event happened somewhere at the top in-app levels, a Breadcrumb item may supply a badge, prompting how many events are there require an attention.

This is all you need to know to design better Badges.

Hope this exploration will help you to improve your in-app UX. The next chapter is for the Breadcrumbs, probably. Stay tuned!

Other chapters: Avatars, Accordions, App bars