Breadcrumb
A breadcrumb is a navigational aid that displays a hierarchical path to the current page or location in a website or application. Each segment (or “crumb”) in the path is typically a link, allowing users to move backward to higher-level sections. Breadcrumbs help orient users within complex or deep navigation structures, providing quick access to parent or sibling pages without resorting to the main navigation.
Usage
Hierarchy Visualization: Breadcrumbs clearly communicate where the user is within a multi-level navigation structure.
Easy Backtracking: Users can quickly move to higher-level pages without extra clicks or steps.
Space Efficiency: Breadcrumbs use minimal screen real estate compared to a full navigation menu, making them ideal for deep site hierarchies.
Use cases
E-commerce websites, showing the path from “Home” → “Clothing” → “Men’s” → “Shoes” → “Sneakers”
Documentation sites, indicating chapters and subchapters (e.g., “Docs” → “Getting Started” → “Installation”)
File explorers or management dashboards with multiple nested folders (e.g., “My Files” → “Projects” → “2024”)
Not to be confused with
Tabs: Tabs switch between related content in the same context. Breadcrumbs show a trail of hierarchical levels.
Sidenav or Main Nav: A sidenav shows the broader navigation structure, while breadcrumbs focus on the user’s exact location in a path.
Best practices
Reflect Actual Hierarchy
Ensure breadcrumbs match the site or app’s structure, not just the URL path.
If a page fits in multiple categories, choose the most logical or primary path for the breadcrumb.
Use Clear Separators
Common separators include “>”, “/”, or “».” Maintain consistent design (e.g., spacing, color) so users instantly recognize each level.
Some designs use arrows or chevrons—pick one that aligns with your design system.
Clickable Trails
Make each crumb (except the current page) a link to that level.
Use a different visual style (e.g., bold or disabled styling) for the current page crumb to indicate it’s not clickable.
Handle Long Labels & Overflow
Truncate or abbreviate long text (e.g., “Department of …” → “Dept. of…”), possibly showing the full text on hover.
Consider responsive layouts, where breadcrumbs might collapse partially on smaller screens, leaving only the topmost and current levels visible.
Align with Accessibility
Use appropriate ARIA roles and markup (role="navigation", aria-label="breadcrumb").
Ensure each crumb has descriptive link text (avoid just “Home > …”).
Provide a clear focus state for keyboard users.
Keep It Minimal
Avoid crowding breadcrumbs with extra elements (icons, badges). Clarity is key—focus on the path itself.
If the hierarchy is very deep, consider showing just the most relevant crumbs (e.g., “Home > … > Parent > Current”) and allow expansion if needed.
Consistent Placement
Typically placed near the top of the page, under the header or title, so users immediately see their navigation path.
Use uniform spacing and styling across all breadcrumbs in the product.
Keep breadcrumb labels short and descriptive. Truncate or shorten long labels if space is limited.
Summary
A breadcrumb is a concise, clickable trail reflecting the user’s location in a hierarchical structure. By employing clear separators, logical labeling, and accessible markup, breadcrumbs offer quick backtracking and a strong sense of context—critical for deep or complex navigations. They should remain minimal and consistent, fitting seamlessly within the overall design system while improving wayfinding and user flow.
