Breadcrumb

A breadcrumb component is a navigational UI element that displays the hierarchical path of a user's location within a website or application.

Anatomy

Breadcrumbs are a sequence of links typically displayed at the top of a webpage or app and help users understand where they are in the overall hierarchy and easily navigate back to previous levels.

Separator: A character (often ’›’ or ’/’) that separates each breadcrumb link.
Breadcrumb Links: Links representing each level of the hierarchy. They are typically styled as text or icons.
Dropdown(Optional): A dropdown containing links to each level of hierarchy

Usage

The Breadcrumbs component is commonly used in web and application design for the following purposes:

Website Navigation: Breadcrumbs help users navigate websites efficiently, especially when a site has a deep hierarchical structure.
Application Navigation: In applications with multiple screens or sections, breadcrumbs guide users through the app’s hierarchy.
E-commerce: Breadcrumbs are essential in e-commerce websites, showing the product category path.
Documentation: In documentation websites, breadcrumbs show the hierarchical structure of articles, making it easier for users to find relevant content.

Common places breadcrumbs appear : Mobile app homepage , website homepage and other pages when needed etc.

When to use

On any page that is more than two levels deep in the website's hierarchy
On pages with complex navigation structures
On pages where users are likely to be coming from different entry points
On pages where users need to be able to easily backtrack to previous levels

When not to use

On the homepage
On pages with very simple navigation structures
On pages where users are not likely to need to backtrack
In pop-ups or modal windows

Accessibility

To ensure accessibility, follow these guidelines:

Make sure that all links in the breadcrumb trail are keyboard accessible.
Use clear and concise link text.
Add an aria-label attribute to the breadcrumb trail to provide a descriptive label for screen reader users.
Use the aria-current=“page” attribute to indicate the current page in the breadcrumb trail to screen reader users.

Separate each link in the breadcrumb trail with a separator character to make it clear and concise.

Don't

Didn’t separate each link in the breadcrumb trail with a separator so it confusing.

Content

When implementing breadcrumb content, follow these guidelines:

Keep breadcrumb text concise and informative, indicating the content’s hierarchy.
Use a maximum of two lines for breadcrumb text to avoid visual clutter.
If necessary, abbreviate or truncate breadcrumb text to fit the available space while ensuring that it remains understandable.

Use breadcrumb trail on pages that had many level deep in the website’s hierarchy

Don't

Use the breadcrumb trail on pages that are only one level deep in the website's hierarchy.