Breadcrumbs

Overview

Breadcrumbs are a navigational aid that helps users understand their location within the website's hierarchy. They provide a trail for users to follow back to the starting or entry point of a website. Breadcrumbs enhance the user experience by making it easier to navigate complex websites and find specific content.

Anatomy

The breadcrumb component consists of the following elements:

1. Home Icon: Represents the starting point of the website.
2. Separator: Separates different levels.
3. First Level: The primary category or section.
4. Second Level: A subcategory or subsection within the first level.
5. Current Page: The page the user is currently on, indicating the end of the breadcrumb trail.

Types

Desktop

Info: On desktop, display all breadcrumb levels. First and second levels should be linked.

View Code

Bitbucket Repo

Mobile

Info: On mobile, display only the current page.

View Code

Bitbucket Repo

Accessibility

• ARIA Landmarks: Use aria-label to provide a clear label for the breadcrumb navigation.
• Keyboard Navigation: Ensure breadcrumbs can be navigated using the keyboard.
• Screen Readers: Use appropriate HTML elements (e.g., <nav>, <ol>, <li>) and ARIA roles to ensure screen readers can interpret the breadcrumb structure.
• Contrast and Readability: Ensure sufficient contrast between text and background for readability.

Crimes

X

DO NOT

Avoid using breadcrumbs as the primary navigation method; they should complement the main navigation.

DO NOT

Don't make the current page link clickable; it should only indicate the user's current position.