Fil d’Ariane

Anatomy

The structure of breadcrumbs in UI design is straightforward and simple!

• Origin: The starting point of the breadcrumb path
• Levels: The intermediate entities between the origin and the current point
• Delineator: The separator that clearly marks each page, object, or task
• Current: The endpoint or final item in the breadcrumb path

Breadcrumbs consist of the first item (the origin), the intermediate levels marked by delimiters, and the last item, known as the current item.

In terms of placement, breadcrumbs are typically located near the top of a webpage or app, close to the header or primary navigation. While their position can vary based on design preferences and user needs, it's generally best to place them in a visible, easily accessible spot that remains consistent across the site or app.

Best practices for Breadcrumb

Accessibility of breadcrumbs

Breadcrumbs play a key role in enhancing interface accessibility, particularly for screen reader users, by offering a more detailed navigation experience. Therefore, it’s essential to consider their tab order and placement on the page.

Enable keyboard navigation by allowing users to 'tab' through breadcrumb items and press enter to activate a link. This is especially beneficial for power users, such as those involved in data entry or other tasks requiring extensive keyboard use. Additionally, if breadcrumbs are dynamically updated, they should be announced by screen readers, so users are informed of their current position, any changes in the route, or other pertinent information.

Truncation Patterns in Breadcrumbs

Truncation – Each Word

• This approach involves truncating individual words within the breadcrumb as they grow. It’s useful when the entire context of the path is important for the user to see, but space limitations require shortening the labels.

Truncation – Origin and Terminal Values

• Here, only the first and last parts of the breadcrumb path are shown. This helps users recall where they started and where they’ve ended up. The amount of breadcrumbs displayed at the terminal end should depend on the available screen space and the relevance of the information.
  • Space Optimization: With multiple levels of navigation, breadcrumbs can take up a lot of space. A dropdown menu helps save screen real estate while still providing access to all the navigation levels. This method is similar to the back button on many browsers.
  • Improved Visibility: Breadcrumbs remain visible in a dropdown format, even on small screens or devices with limited space, such as mobile devices.
  • Scalability: Dropdowns are effective for complex navigation structures, as they easily scale with an increasing number of levels.
  • Increased Accessibility: For users with disabilities, a dropdown is often easier to navigate than horizontal scrolling, improving overall accessibility.
    

Ensure adequate spacing between links

A crowded breadcrumb trail can negatively impact usability, making it harder for users to quickly scan the labels and accurately select the desired link. This is particularly important in mobile design, where limited screen space and touch accuracy are crucial factors.

To improve user experience, ensure there is enough space around each breadcrumb link. This extra space boosts readability and ease of navigation. Moreover, on mobile devices, each link's touch target area should be at least 44 x 44px, which is considered a comfortable size for fingertip navigation, reducing the likelihood of accidental taps.

Mark the homepage as the first breadcrumb

In breadcrumb navigation, the homepage typically serves as the starting point, representing the core of the website’s structure. Including the homepage link—such as a "Home" label or the company’s name, like eBay—at the beginning of the breadcrumb trail allows users to easily return to the main page. This is particularly useful if they want to reset their navigation or feel lost within the site’s hierarchy.

Keep the styling of breadcrumbs simple

Breadcrumbs are a secondary navigation tool and should be designed to integrate seamlessly into the webpage. They are not intended to be the focal point of the page, so it's best to avoid using bold or high-contrast colors that might distract users from the main navigation and content.

Also, it's important to follow accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG), which include color contrast requirements. These ensure that the content remains accessible to all users, including those with visual impairments.

Left-align breadcrumbs for easier scanning

For websites targeting left-to-right reading audiences, breadcrumbs should be left-aligned. This matches the natural reading flow, making it intuitive and easy for users to follow.

On the other hand, for websites aimed at right-to-left reading audiences, such as those in Arabic or Hebrew, right-aligning breadcrumbs is more logical.

Center-aligned breadcrumbs can feel misplaced and may disrupt the page’s readability and flow. Consistency in alignment is important—if the website’s overall design aligns elements to the left, breadcrumbs should follow this convention to maintain a unified and cohesive design.

When to use Breadcrumb ?

Don't use breadcrumbs as a replacement for global navigation

Breadcrumbs should not replace global navigation; instead, they serve as a complementary tool to help users understand their location on a website and easily navigate back to previously visited pages.

Global navigation, in contrast, is the main way users navigate a website. It typically includes key menu items linking to the major sections of the site, offering direct access to these areas from anywhere on the site.

While breadcrumbs assist users by showing their navigation path, global navigation provides a broader overview of the website’s content. Both elements should work together in a website's design, each fulfilling its own purpose to create a seamless and user-friendly experience.

Use the breadcrumb trail to display hierarchy

Breadcrumbs should be used to represent the site's hierarchy, not the user's browsing history.

In web design, breadcrumbs are meant to reflect the structure of the website rather than a record of the pages users have visited. Their goal is to display the levels of the website's hierarchy that the user has navigated, similar to a map showing the main routes rather than every step along the way. Including all pages a user has visited can clutter the breadcrumb trail and make it visually overwhelming.

Furthermore, breadcrumbs should only include the key levels of the site, such as main sections or categories (ancestor pages). If a subcategory or item doesn't have its own page, it shouldn't appear in the breadcrumb trail. This ensures breadcrumbs remain focused and helpful, allowing users to easily understand their location within the site's structure without unnecessary complexity.

Use a single breadcrumb on mobile

On mobile devices, it's crucial to optimize screen space while maintaining clear navigation. A good practice for breadcrumbs on mobile is to display only a single breadcrumb linking to the parent level. This keeps the interface simple and uncluttered. For instance, on an e-commerce site, if a user lands on a specific product page, a breadcrumb linking to the parent category allows them to easily browse other products in the same category, such as comparing dresses, without overwhelming the screen with a long breadcrumb trail.

This approach helps avoid clutter and saves valuable screen space, ensuring a clean and user-friendly interface. However, this should be limited to mobile devices. On desktop versions, where there’s more space available, showing the full breadcrumb trail offers a more complete navigation experience.