tutorials

Breadcrumbs UI design tips

Badge design UI/UX tips. Purposes, use-cases, UX patterns reviewed, and other things to consider.
August 2022 · 7 mins to read

by Roman Kamushken

What are Breadcrumbs and when to use?

Use Breadcrumbs as the navigation component, especially in cases when your app or website contains 3 or more levels of hierarchy and users are required to jump back on a parent level quickly.
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.
Badge UI design exploration

Table of contents

Breadcrumbs Anatomy
  • Links #
  • Separators #
  • Icons #
States
  • Active #
  • Onhover #
  • Disabled #
  • Focused #
Styling & Themes
  • Using colors #
  • Link container #
UX & Usability
  • Home comes first #
  • Popover menu #
  • Truncation #
  • Collapsed links #
  • Parameters reset #
  • Using badges#

Anatomy

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
Links
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 UI design exploration: Links
Separators
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).
Breadcrumbs UI design exploration: Separators
Icons
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.
Breadcrumbs UI design exploration: Icons

States

Active
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.
Badge UI design exploration
Onhover
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):
Badge UI design exploration
Disabled
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:
Badge UI design exploration
Focused
Focused Breadcrumb reveals an outline stroke wrapping the link container, after user was interacted with it recently:
Badge UI design exploration

Styling & Themes

Colors
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:
Badge UI design exploration
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:
Badge UI design exploration
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
Badge UI design exploration
Link container
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:
Badge UI design exploration
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:
Badge UI design exploration
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):
Badge UI design exploration

UX & Usability

Home comes first
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.
Badge UI design exploration
Popover menu
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:
Badge UI design exploration
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:
Badge UI design exploration
Truncation
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:
Badge UI design exploration
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:
Badge UI design exploration
Collapsed links
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:
Badge UI design exploration
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:
Badge UI design exploration
Reset parameters
Breadcrumb element equipped with close icon to reset page attributes, e.g after some filtering parameters were applied for the current page:
Badge UI design exploration
Using Badges
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

Related links

Subscribe to Setproduct
Reqular newsletter with new releases, freebies, inspiration and discounts ⭐️

More to ☕ read

Show more ⬇︎