Breadcrumbs are UI design navigational elements that indicate the location within a multi-level structure and provide clickable links to go up within that hierarchy for a better user experience.
Remember the Hansel and Gretel story we read when kids? Well, in UI/UX design, breadcrumbs are similar to the ones the kids left in the story. These are patterns that help the users to remember the levels they visited. So, instead of the breadcrumbs that marked the path home, in UI/UX design, breadcrumbs represent the path the user took in a design. Similar to navigation elements, it gives the users the opportunity to enable and even trace their steps back, which creates a better user experience.
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 for orientation.
This path starts from the home page and progresses through parent and child pages. Breadcrumbs take up less space, and it is more easily understood by users than when they’re put into a menu, especially if there is a higher level of complexity of the platform.
Breadcrumbs are an important part of a good user experience when navigating. They help the user be aware and see their exact location in the hierarchy of the website structure. Imagine you were doing research and you got deep into the site.
Now that you have finished your research, you just want to come back to the main page, but when you are so far ahead, exiting the site just seems easier. And this is where breadcrumbs intervene, as they can carry you directly to the main page.
- Location-Based Breadcrumbs: In UI/UX design, this type of breadcrumb shows the structural location of a user on a platform. This is used in most e-commerce or content-heavy websites, for filtering and sorting content.
- 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.
Breadcrumbs are often encountered in designs that require easier navigation and this is not typically needed in a flat hierarchy with only one or two levels.
- 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.
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, on hover, and disabled.
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 indicate that a user has recently interacted with the link. This state is illustrated through a link container with an outline stroke wrap.
Onhover Breadcrumbs are activated when a user points to the area they are about to click on. The default state of an on-hover breadcrumb is to underline the container. But you can also choose to highlight the breadcrumb, especially if the active state of a breadcrumb is also highlighted.
Disabled Breadcrumbs indicate 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.
Designing can be a more complicated job than you would expect it. It takes time, dedication, and a lot of creativity. And if you are just starting out, a design system might be a little more complicated than a UI kit. So, if you are just starting out your design career, a UI kit will be your savior, and as you are switching to more complex designs, a design system will do you wonders.
Creating breadcrumbs can become easier than ever with the help of a design system. With a design system, we automatically eliminate this dead time. Creating a component takes time, not only for designing but also for research and feedback. However, clearer guidelines mean less research and fewer rounds of feedback, which means fewer revisions. With a design system, it also means fewer risks of error.
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
