Roman Kamushken
<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.
![Badge UI design exploration](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9c45b69cbf5606f2af0f_Breadcrumbs_00-min.webp)
{{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.
![Breadcrumbs UI design exploration: Links](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf9e1511c943840d8c_Breadcrumbs_1-min.webp)
{{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).
![Breadcrumbs UI design exploration: Separators](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdea0331025efa10eb9_Breadcrumbs_2-min.webp)
{{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.
![Breadcrumbs UI design exploration: Icons](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cde512f9cbe24435271_Breadcrumbs_3-min.webp)
{{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.
![Breadcrumbs UI design exploration: Active state](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf8424638a244d4b1c_Breadcrumbs_4-min.webp)
{{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):
![Breadcrumbs UI design exploration: Onhover state](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdfd6a654567d3e909e_Breadcrumbs_5-min.webp)
{{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:
![Breadcrumbs UI design exploration: Disabled state](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cde028476bce3c48185_Breadcrumbs_6-min.webp)
{{spacer-24}}
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](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cde92092c0bdc9c0e3d_Breadcrumbs_7-min.webp)
{{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.
![Breadcrumbs UI design exploration: Styles & theming](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdffc2e0bfac7b2c887_Breadcrumbs_8-min.webp)
{{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.
![Breadcrumbs UI design exploration: Colors customization](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdfeac0a97331c18f09_Breadcrumbs_9-min.webp)
{{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
![Breadcrumbs UI design exploration: Color tokens usage](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cde84a6f2f6e7b1177d_Breadcrumbs_10-min.webp)
{{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:
![Breadcrumbs UI design exploration: Filled background](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdfd54ce2eb9461e386_Breadcrumbs_11-min.webp)
{{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:
![Breadcrumbs UI design exploration: Corner radius](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf4642fbb100adc51c_Breadcrumbs_12-min.webp)
{{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):
![Breadcrumbs UI design exploration: Applying stroke for states](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdffc2e0bfac7b2c882_Breadcrumbs_13-min.webp)
{{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.
![Breadcrumbs UI design: Home comes first](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf1fbb9c5686b13934_Breadcrumbs_14-min.webp)
{{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.
![Breadcrumbs UI design: popover menu](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9ce022da7d7b4424bcbe_Breadcrumbs_15-min.webp)
{{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.
![Breadcrumbs UI design: popover menu](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdee75a3f87efc55547_Breadcrumbs_16-min.webp)
{{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:
![Breadcrumbs UI design: truncated links](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf8f9ded285b9dac59_Breadcrumbs_17-min.webp)
{{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:
![Breadcrumbs UI design: truncated names](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9ce1cd5768e1da8046a1_Breadcrumbs_18-min.webp)
{{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:
![Breadcrumbs UI design: truncated levels](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf169fffceafa636c5_Breadcrumbs_19-min.webp)
{{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:
![Breadcrumbs UI design: truncated levels](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdf2b4de0eb38c5644a_Breadcrumbs_20-min.webp)
{{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:
![Breadcrumbs UI design: close icon](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9cdee75a3f87efc5554a_Breadcrumbs_21-min.webp)
{{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.
![Breadcrumbs UI design: using bages](https://cdn.prod.website-files.com/64d1f4894b9a964bb3b26df9/651e9ce08805204bab9f1750_Breadcrumbs_22-min.webp)
{{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)