Breadcrumbs: Guiding Users Through Your Information Hierarchy
The Breadcrumb component helps users track their location within a website or application's content structure, providing a navigational trail.
Features
Discover the key features of the Breadcrumb component.
Intuitive Navigation Aid
Breadcrumbs provide a clear path for users to trace their steps, enhancing navigation efficiency within your interface. Simplify user journeys with intuitive breadcrumbs.
Contextual Hierarchy Display
Display hierarchical structure dynamically, guiding users through the website's architecture with clarity and precision. Enhance user understanding with contextual hierarchy.
Responsive Adaptation
Breadcrumbs adapt seamlessly to various screen sizes, ensuring consistent usability and clarity across devices. Facilitate effortless navigation on any device with responsive breadcrumbs.
Anatomy
Leading Icon
This is the starting point of the breadcrumb trail, often representing the home page or main section. It helps in instantly recognizing the starting point.
Text Label
Each 'crumb' in the breadcrumb trail is labeled with a clear, concise text in a text-brand color, indicating the different levels or sections the user has navigated through.
Background
The breadcrumb maintains a transparent background to blend seamlessly with various webpage designs, maintaining a clean and uncluttered aesthetic.
Example Use Cases
Website Navigation
Breadcrumb components are frequently employed in websites with deep hierarchical structures, such as e-commerce platforms or content management systems, to help users navigate through categories, subcategories, and product pages.
Application Navigation
In web applications with multi-step processes or complex workflows, Breadcrumb components aid users in understanding their progress and navigating between different stages or sections.
Document Viewing
Document management systems or knowledge bases often utilize Breadcrumb components to display the path to the current document or page, allowing users to backtrack through folders or categories.
Search Results
Breadcrumb components can be incorporated into search result pages to show users the path followed to reach a particular set of search results, enabling them to refine or modify their search criteria.
Guidelines for Usage
To effectively integrate the Breadcrumb component into a design system, consider the following guidelines:
Hierarchy Clarity: Ensure that the breadcrumb trail accurately reflects the hierarchical structure of the content or steps. Each link in the breadcrumb should represent a distinct level in the hierarchy, with the leftmost link typically indicating the homepage or root level.
Breadcrumb Length: Keep the breadcrumb trail concise and relevant to avoid overwhelming users with unnecessary links. Limit the number of levels displayed in the breadcrumb to maintain clarity and readability.
Clickable Links: Make each segment of the breadcrumb clickable to allow users to navigate directly to any level within the hierarchy. Use clear visual cues, such as underlined text or hover effects, to indicate the interactive nature of the breadcrumb links.
Responsive Design: Design the Breadcrumb component to be responsive and adaptable to different screen sizes and devices. Ensure that the breadcrumb layout adjusts gracefully to accommodate varying lengths of text and screen widths.
Variants
With Icons
In this variant, each crumb is accompanied by a relevant icon, providing a more visual and engaging breadcrumb trail.
Text Only
A cleaner, minimalist variant where the trail is indicated through text labels only, without the use of icons.
Icon Only
This variant comprises only iconographic representations without text labels. It's a visually-driven approach, best suited for applications where space is limited, or when the icons are universally recognizable, ensuring a clean and modern design.
States
.breadcrumb :enabled
The default state where the component is fully interactive and ready for user actions. It appears normal and invites interaction.
.breadcrumb :hover
The state when a user places their cursor over the component, indicating it is ready for interaction and often visually changes to show responsiveness.
.breadcrumb :focus
The state showing that the component is currently selected or active, highlighted for user awareness and accessibility purposes, often with a border or shadow.
.breadcrumb :*disabled
The state where the component is visible but non-interactive, indicating it is not available for use. It often appears faded or greyed out to signal its inactivity.
Best Practices vs. Common Pitfalls
Do:
Ensure that the text labels used are clear, indicative of the page they represent, and maintain a consistent style throughout.
Use a recognizable leading icon that clearly indicates the starting point, facilitating quick navigation to the home or main section.
Ensure that the breadcrumb component adapts well to various screen sizes, maintaining clarity and usability.
Don't:
Avoid using too many levels in the breadcrumb trail to prevent clutter and confusion.
Refrain from skipping levels in the breadcrumb trail as it might disorient the users.
Breadcrumbs should complement the primary navigation, not replace it. Ensure it works cohesively with other navigational elements.