Breadcrumbs UI design tips

Breadcrumbs design UI/UX tutorial. Anatomy, structure and component usage cases overviewed with other things to consider.

Tutorials

Published on

August 19, 2022

|

3 mins

Blog

Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview

Navigation

Subscribe to newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

{{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

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tutorials

5 mins read

Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases

Get practical solutions for Checkbox design dilemmas, from styling complexity to inclusive user experience, in this dedicated tutorial.

Tutorials

6 mins read

Input UI Design – Optimize data forms UX with expertly crafted text fields

Learn how to design and optimize Input components for improved forms filling experience and UI. Our in-depth guide will help you create seamless and user-friendly designs.

Tutorials

9 mins read

Creating app settings UI design: Usability tips and best practices

Learn about key design patterns and elements for settings apps to enhance user experience and accessibility in your own app's settings section.

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

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.

Start now

SetGPT is a free service; however, authentication is required

This is some text inside of a div block.
This is some text inside of a div block.