Breadcrumbs

Breadcrumbs are a secondary navigation aid that displays the user’s current location in a hierarchical structure as a trail of clickable links.

Use breadcrumbs in interfaces with clear hierarchical structures at least three levels deep (e.g., Home > Category > Subcategory > Current Page; documentation sites with nested sections).
Primary scenarios: Users enter mid-hierarchy (via search, deep links, or shared URLs) and need quick orientation; frequent upward navigation in large information architectures.
Benefits: Provides location context and direct ancestor links, reducing disorientation.
Position as secondary navigation: Always complement primary elements (global menus, sidebars, tabs).

Horizontal hierarchical trail: Standard layout as a single-line inline list showing the path from root to current page (e.g., Home › Category › Subcategory › Current Page).
Separator styles:
- Chevron (› or >): Preferred for strong visual hierarchy.
- Forward slash (/): Lighter, path-like appearance.
Home indicator: Often begins with a home icon (for compactness and universal recognition) or “Home” text link; icon recommended for internationalization and reduced text length.
Current page treatment: Final item is non-clickable plain text (often bold or in subdued color); previous items are interactive links with hover/focus states.
Truncation/overflow: For long paths or narrow screens, use ellipsis (…) for collapsed intermediates.

Flat or shallow hierarchies: Avoid on sites with fewer than three levels or no clear parent-child structure (e.g., single-page apps, landing pages, or simple blogs); breadcrumbs add unnecessary clutter without providing meaningful context.
Homepages or root pages: Never place on the top-level page, as there are no ancestors to link to; it creates confusion and violates user expectations.
Linear or sequential flows: Do not use in wizards, checkout processes, or step-by-step forms; use progress indicators or steppers instead for clearer forward/backward progression.
As primary navigation: Avoid relying on breadcrumbs as the main navigation method; they are strictly secondary and cannot replace global menus, sidebars, or tabs.
Space-constrained mobile layouts without adaptation: Skip if the trail cannot be responsively truncated; prefer a simple back button or collapsed menu.

Element	Description
Home indicator	Optional first visible item; compact home icon (preferred for space and internationalization) or “Home” text link.
Items	Visible sequence of segments; each has display text (`label`).
Separator	Visible delimiter between items for clear directional flow.
Current item	Final visible segment; plain non-clickable text, typically neutral/high-contrast, sometimes bolded for emphasis and uses default text color.
Ellipsis	Overflow indicator for long/narrow paths; replaces intermediate items.

State	Description	Visual Indicators
Default (link)	Standard interactive breadcrumb item (all except current page)	Colored text (e.g., default link color), with or without an underline
Hover (link)	Mouse pointer over an interactive breadcrumb link	Stronger visual feedback: color shift and underline (add or remove)
Focus (link)	Keyboard-focused interactive link (critical for accessibility)	Clear focus ring (high-contrast, keyboard-visible)

Labels: Use concise, descriptive page or section titles from the hierarchy (e.g., “Home” > “Online Order” > “Meals” > “Spicy Chicken Sandwich”); aim for 1–3 words per item to maximize scannability and reduce truncation needs.
Tone and language: Neutral, factual, plain language; avoid abbreviations, jargon, or ambiguity for universal clarity.
Truncation rules: When screen real estate is insufficient for the full trail:
- Collapse intermediate items (never the home/root or current page).
- Replace collapsed segment with ellipsis (…) (e.g., Home > … > Subcategory > Current page).
- Make the ellipsis interactive (click or focus opens a popover/flyout listing the hidden intermediate items for navigation).
- Preserve full, meaningful labels in the popover and in screen-reader announcements (no truncation in ARIA text).

ARIA roles and attributes: Use <nav> landmark with aria-label="Breadcrumb" to identify as navigation; structure as an ordered list (<ol>) with list items (<li>); make ancestor items interactive <a> elements; mark current item as a <span> with aria-current="page" for screen reader announcement (e.g., “Current page: Page Title”); hide separators from assistive tech via aria-hidden="true" or CSS.
Focus management: Provide visible, high-contrast focus indicators (e.g., outlines) on interactive items; manage focus programmatically if truncation popover is used (e.g., shift focus to popover on activation, return on close).
Screen reader support: Announce the full hierarchy as a navigable list (e.g., “Breadcrumb, list of N items: Home link, Category link, Current page: Page Title”); ensure truncation popovers are read as dialogs or menus with full labels.

Support standard keyboard navigation