Breadcrumbs are UI navigational elements that indicate the location within a multi-level structure and provide clickable links to go up within that hierarchy.
Breadcrumbs serve as structural compositions for easier navigation across high-level pages and are usually displayed at the top of a web page or application interface. They inform users where they are on a specific website, platform, or application and offer a clear path in orientation. This path starts from the home pages and progresses through parent and child pages. Breadcrumbs take up a smaller space, and they are more easily understood by users than when they're put into a menu. Especially if the platform has a higher level of complexity.
This type of breadcrumb shows the structural location of a user on a platform. This is used in most eCommerce or content-heavy websites.
Attribute-Based Breadcrumbs
Attribute-based breadcrumbs are needed when filtering and categorizing content based on specific characteristics. This type of breadcrumb is used in online shopping to help users find products with the desired attributes.
Path-Based Breadcrumbs
Path-based breadcrumbs, or history-based breadcrumbs, show the unique path that the user took and offer the possibility of returning to the current page at each step. The “back to results” feature stands as a back button and helps the user navigate back to the previous page of their path.
When To Use Breadcrumbs in UI Design
Use in platforms with heavy content that can be divided into three or more layers in a hierarchy.
Use when a structure for the user to understand the platform is needed.
Use when no other type of visual navigation can provide the information at the same deep level.
Use when the user might need to go back and forth between the parent level quickly.
How To Use Breadcrumbs in UI/UX Design
Breadcrumbs must always show progress from the highest level (the parent) to the lowest (the child). Users should be able to navigate through the breadcrumbs intuitively, regardless of where they are on the platform. Breadcrumbs take four states: active, focused, onhover, and disabled.
Active Breadcrumbs
Active Breadcrumbs represent the current location on a platform and the last level within the hierarchy. Highlight and use a bolder font or another color when a breadcrumb is active to make it intuitive and obvious.
Focused Breadcrumbs
Focused Breadcrumbsindicate that a user has recently interacted with the link. This state is illustrated through a link container with an outline stroke wrap.
Onhover Breadcrumbs
Onhover Breadcrumbsare activated when a user points to the area they are about to click on. The default state of an onhover breadcrumb is by underlining the container. But you can also choose to highlight the breadcrumb – especially if the active state of a breadcrumb is also highlighted.
Disabled Breadcrumbs
Disabled Breadcrumbsindicates that a link is unavailable and the page cannot be accessed. Use this breadcrumb with reduced opacity and a blocked sign when the cursor is on the link to illustrate that the link is inactive but still visible in the hierarchy.
Use the Breadcrumbs UI Element in Your UI/UX Design With uinkits
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find breadcrumbs and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
