Breadcrumb

Breadcrumbs provide a trail for users to follow back to the starting or entry point of a website, improving navigation and usability.

Overview

The Breadcrumb component offers a clear, linear navigation path that guides users through the content structure of a website or application.

When to use

• Use breadcrumbs when the website or application has a deep or complex hierarchical structure, helping users navigate back through multiple levels.

• Implement breadcrumbs to provide context to users about where they are within a website, especially in cases where users might land on a page from external sources, like search engines.

• Use breadcrumbs to improve SEO by enhancing the structure and organization of a site, making it easier for search engines to crawl and index content effectively.

When not to use

• Avoid using breadcrumbs on websites with a flat structure (e.g., only one or two levels deep), where the primary navigation menu already provides sufficient guidance.

• Avoid breadcrumbs in interfaces with very limited screen space, as they may clutter the UI without providing significant value.

• Avoid breadcrumbs on pages where the content changes frequently based on user interactions, as the breadcrumb trail may become confusing or misleading.

Placement

Breadcrumbs are best positioned at the top left of the content area, just below the site’s global navigation or header. This placement makes them easily accessible and visible as users scan the page. It’s important to keep the breadcrumb trail consistent in placement across all pages to enhance user familiarity and improve overall navigation efficiency.

Types

Anatomy

1. Home Icon: Represents the root or starting point of the navigation path, typically linking to the homepage. This icon helps users quickly return to the beginning of the site hierarchy.

2. Menu Button: Appears when certain breadcrumb items are too long or when there are multiple levels collapsed into a single point. This button can be interacted with to reveal an expanded menu showing the full text or additional navigation options.

3. Divider: Used between breadcrumb items to visually separate each level in the hierarchy. Often represented by a simple ">" symbol, it indicates progression from one level to the next.

4. Icon Leading: An optional element that can be placed on either the left or right side of the text. This icon can represent the specific content of the breadcrumb item, such as a folder, document, or other symbols relevant to the breadcrumb level.

5. Text: Represents a specific level in the navigation hierarchy, such as a category name, subcategory, or page title. Text should be concise, ideally no longer than 20-30 characters, to ensure it is easily scannable.

Paddings

Accessibility

• Keyboard Navigation: Ensure that breadcrumbs are fully navigable via keyboard, allowing users to tab through each link in the breadcrumb trail. Each link should be focusable and indicate the current focus state.

• Screen Reader Support: Provide clear and descriptive labels for each breadcrumb link, ensuring screen readers can accurately convey the navigation path to visually impaired users.

• Responsive Design: Breadcrumbs should be responsive and adapt to different screen sizes. On smaller screens, consider truncating the breadcrumb trail or using an expandable menu for less critical links to save space while maintaining usability.

Example

• Hierarchical Navigation: An e-commerce site with categories like "Home > Electronics > Laptops > Gaming Laptops."

• Landing Pages from Search Engines: A blog post found via Google search showing "Home > Blog > Design Tips > Color Theory."

• Product Detail Pages: A product page showing "Home > Men’s Clothing > Jackets > Winter Jackets."