tutorials

Breadcrumbs UI design tips

Breadcrumbs design UI/UX tutorial. Anatomy, structure and component usage cases overviewed with other things to consider.
August 2022 · 3 mins read

by Roman Kamushken

Userpic

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 #
  • Reset parameters #
  • Using badges #
SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required

Anatomy

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

  • Link — to initiate the action
  • Separator — to visually divide links
  • Icon — for additional functions, or to 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 that are 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 the caption, or assemble an icon with link label.

In single-icon mode, set on hover tooltips to help identify what's behind the icon, especially when a pictogram is not acquainted with the users.
Breadcrumbs UI design exploration: Icons

States

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

The active link must be not clickable as we can't let the user re-enter a section where he already exists.
Breadcrumbs UI design exploration: Active state
Onhover
Onhovered Breadcrumb points to a user the area of upcoming click. By default, this state calls out by displaying a link with an underline stroke. However, it's more practical to highlight the whole Breadcrumb container where the link sits (e.g Home):
Breadcrumbs UI design exploration: Onhover state
Disabled
Disabled Breadcrumb exhibits a cursor with a blocked sign when it's rolled over the unavailable link. With reduced opacity it's positioned as inactive among other links, but still visible to stick to the hierarchy:
Breadcrumbs UI design exploration: Disabled state
Focused
Focused Breadcrumb reveals an outline stroke wrapping the link container after a user has interacted with this particular link previously:
Breadcrumbs UI design exploration: Focused state

Styling & Themes

Colors
Breadcrumbs component is a visually plain UI element. There are not so many goals to redesign it, except colors and some link container CSS adjustments to add some tiny design details to fit the whole app UI composition.
Breadcrumbs UI design exploration: Styles & theming
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 to achieve a harmonic layout.
Breadcrumbs UI design exploration: Colors customization
Apply colors when required. To colorize Breadcrumbs you have to rework colors for text, separator, and link container. Through a design system style guide for example, you may settle 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
Breadcrumbs UI design exploration: Color tokens usage
Link container
There are several parameters to modify for a Breadcrumb link container to customize the exterior by editing those CSS styles:

  • background
  • corner radius
  • outline stroke
Background fill of a link container may be required to stance the Breadcrumb as ready to action, e.g after hovering the cursor. Attaching a tiny shadow here makes a Breadcrumb surface looks like a clickable button:
Breadcrumbs UI design exploration: Filled background
Corner radius adjustment is an uncommon case (e.g MUI describes it) mainly required to fit the aesthetics of your UI shapes to make the interface looks whole:
Breadcrumbs UI design exploration: Corner radius
Outline stroke is a container theme optionally applied for displaying 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, means that a particular section is selected (Active state of the last hierarchy level):
Breadcrumbs UI design exploration: Applying stroke for states

UX & Usability

Home comes first
In Breadcrumbs, the first link always leads to a starting point in the app (e.g home screen, dashboard, shopfront, timeline), where users start navigating.
Breadcrumbs UI design: Home comes first
Popover menu
For revealing additional actions in Breadcrumbs a popover menu might be utilized. Fits all app hierarchy levels. Allows executing sub-actions related to a clicked link.
Breadcrumbs UI design: popover menu
Expand the popover menu when a pointer on hovers the link. This let you save one less user's click, but there is a risk – to expand the menu when a mouse pointer slipped over the Breadcrumb accidentally.
Breadcrumbs UI design: popover menu
Truncation
Truncation appears useful when a Breadcrumb component becomes overflowed due to insufficient screen width (e.g on mobiles), or overloaded by the number of links.

Truncate links when you need to collapse two or more middle hierarchy levels in Breadcrumbs. As mentioned above, reveal the content with the popover menu:
Breadcrumbs UI design: truncated links
Truncate link names, if a Breadcrumb link caption is extra long. It's recommended to display a tooltip after the tiny delay (0.2s), which uncovers the full name when a link on hovers:
Breadcrumbs UI design: truncated names
Collapsed links
There is an alternative approach to truncate Breadcrumb items from the highest levels and aggregate them under a popover menu. Gather links in hierarchical order, leaving only the closest level (or two) to the user's current in-app location:
Breadcrumbs UI design: truncated levels
Suitable to use when a Breadcrumb component has been scaled down from highest resolution to mobile, and you have unnecessary links to hide due to no screen sufficient width to fit:
Breadcrumbs UI design: truncated levels
Reset parameters
Put to use Breadcrumb element equipped with the close icon to reset page attributes, e.g after some filtering parameters were applied for the current page:
Breadcrumbs UI design: close icon
Using Badges
To signal a user there is a new event that happened somewhere at the top in-app levels, a Breadcrumb item may utilize a badge, prompting how many events are there to require attention.
Breadcrumbs UI design: using bages
This is all you need to know to design better Breadcrumbs. Now it's time to visit the homepage of Setproduct, where you'll find a huge number of free and premium UI Kits and design systems.

Also, we specialize in custom design and development. We will be happy to help you with any project: Mobile & Web Apps, Websites, B2B, CRM, Delivery Systems, Online Learning Platforms, and lots more.

You can check our portfolio on many platforms: Dribbble, Twitter, Figma, Reddit, Pinterest, Linkedin. Also, make sure to check the Testimonials of our happy customers.

Related links

More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
App Bar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Navigation Bar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
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.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎