Breadcrumbs UI design tips

<span class="blog_big-paragraph">Breadcrumbs are useful when navigating through complex website structures, e-commerce platforms, content-rich websites, multi-step processes, and mobile applications. They aid users in understanding their current location and backtrack easily.t</span>

Breadcrumbs – are a type of navigation component commonly used to provide users with a hierarchical trail of links that represent their current location within a website or application's structure.

Breadcrumbs typically appear horizontally at the top of a webpage or app screen, forming a clickable path that allows users to navigate to higher-level pages.

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

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

{{spacer-24}}

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.

{{spacer-24}}

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).

{{spacer-24}}

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.

{{spacer-64}}

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.

{{spacer-24}}

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):

{{spacer-24}}

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:

{{spacer-24}}

Focused

Focused Breadcrumb reveals an outline stroke wrapping the link container after a user has interacted with this particular link previously:

{{spacer-64}}

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.

{{spacer-16}}

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.

{{spacer-16}}

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

{{spacer-24}}

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:

{{spacer-16}}

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:

{{spacer-16}}

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):

{{spacer-64}}

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.

{{spacer-24}}

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.

{{spacer-16}}

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.

{{spacer-24}}

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:

{{spacer-16}}

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:

{{spacer-24}}

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:

{{spacer-16}}

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:

{{spacer-24}}

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:

{{spacer-24}}

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.

{{spacer-24}}

{{stars-conclusion}}

{{spacer-24}}

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.

{{spacer-64}}

Related links

• Breadcrumbs in Figma React UI kit
• Breadcrumbs in Chakra UI
• Breadcrumbs in MUI
• Breadcrumbs in Material-X UI kit (Figma)