Breadcrumbs

Breadcrumbs are a common, application‑wide navigation component that display a user’s current location within the product hierarchy and provide direct navigation to ancestor pages.

1. Purpose

• Indicate the user’s current location within the application’s hierarchical structure (from Home to the current page).
• Provide quick, predictable navigation back to any ancestor level.
• Reflect the canonical information architecture, not the user’s click path (e.g., deep links, bookmarks, external entry still show the same structural path).

2. Scope

• Applies to all authenticated application views that are part of the main product hierarchy.
• Excludes the homepage (breadcrumbs are not rendered there).
• Implemented as a shared, reusable UI component used across all modules.

3. Placement and Visibility

• Rendered on all pages except the homepage.
• Positioning:
  • Immediately below the main navigation bar.
  • Immediately above page title and primary page content.
• Top‑level pages (one level below Home) display:
  • Home > Current Page.
• The first item is always “Home” and navigates to the main dashboard/homepage.

4. Structure and Content

4.1 Visual Structure

• Default pattern:
  • Home > Section > Subsection > Current Page.
• Separator:
  • A single, consistent visual separator (e.g., > or /) with spacing on both sides.
  • Separators are not part of the clickable area.

4.2 Items and Links

• All items except the last are rendered as links.
• The final item:
  • Represents the current page.
  • Is rendered as non‑interactive text (no link).

4.3 Label Rules

• Breadcrumb labels must:
  • Match the corresponding page titles or primary navigation labels for consistency.
  • Be concise but sufficiently descriptive to be meaningful in isolation.
• Record detail pages:
  • The final breadcrumb item uses the record’s primary identifier (e.g., ID, reference number, or name).
  • Examples:
    • Home > Cash Receipts > CR-2024-12345
    • Home > Deals > Q4 Enterprise Deal

4.4 Hierarchy Semantics

• Breadcrumbs must always represent the canonical structural hierarchy of the application (information architecture).
• The breadcrumb path must not:
  • Change based on the user’s navigation history.
  • Reflect workflow order, wizard steps, or arbitrary click path.
• If a record belongs to a parent entity, the breadcrumb must include that context (e.g., a Transaction under a specific Billing Item includes the Billing Item in the path).

5. Interaction Behavior

5.1 Link Navigation

• Clicking a breadcrumb link navigates directly to that level’s standard page.
• When navigating via breadcrumb:
  • The target page loads in its default state.
  • Filters, sort orders, search queries, or other local view state from the previous context are not preserved.

5.2 Current Page

• The current page label:
  • Is non‑clickable text.
  • Uses a distinct visual style (e.g., color, weight) to indicate it is not a link.

5.3 Hover and Focus

• For all clickable breadcrumb items:
  • Hover:
    • Display a clear visual change (e.g., underline, color change, or background highlight).
    • Use cursor: pointer.
  • Focus:
    • All links must be reachable via keyboard tab order.
    • Focus indicators must be clearly visible and follow design guidelines.

5.4 Dynamic Updates

• The breadcrumb must update automatically whenever the routed view changes.
• On navigation to:
  • A new page: recompute the hierarchy and labels for the new route.
  • A new record detail: update the final label to the new record’s primary identifier.

6. Deep Hierarchy Handling

6.1 Truncation Rules

• Truncation is applied when the breadcrumb contains 5 or more items (including Home and Current).
• When truncation is active:
  • Always visible:
    • Home
    • The immediate parent of the current page
    • The current page
  • All intermediate levels between Home and the parent are collapsed into a single ellipsis item.
• Display pattern under truncation:
  • Home > ... > Parent > Current

6.2 Truncation Example

• Full path (6 levels):
  • Home > Level 1 > Level 2 > Level 3 > Parent > Current
• Truncated display:
  • Home > ... > Parent > Current

6.3 Ellipsis Interaction Model

• The ellipsis (...) is an interactive control, not plain text.
• On activation (click or key press):
  • Opens a dropdown menu anchored to the ellipsis.
  • The dropdown lists all hidden intermediate levels in top‑down order:
    • Example items: Level 1, Level 2, Level 3.
  • Each dropdown item is a clickable link to its corresponding level.
• Closing the dropdown:
  • When the user clicks outside the dropdown.
  • When the user presses Escape.
  • When the user selects a menu item (navigates away).

7. Accessibility Requirements

The breadcrumb component must comply with WCAG 2.1 AA and standard ARIA patterns.

7.1 Semantics

• Container:
  • Use a <nav> element.
  • Include aria-label="breadcrumb" or aria-label="breadcrumb navigation".
• Structure:
  • Use an ordered list (<ol>) for the breadcrumb trail.
  • Each breadcrumb item is an <li>.
• Current page:
  • Mark the current (non‑link) item with aria-current="page".

7.2 Separators

• Render visual separators (>, /, etc.) outside link text.
• Add aria-hidden="true" to separators so they are not announced by screen readers.

7.3 Keyboard Interaction

• Links and ellipsis control:
  • Must be reachable using Tab and Shift+Tab.
  • Activate with Enter or Space.
• Ellipsis dropdown:
  • Enter/Space on ellipsis opens the dropdown and moves focus into it (or to first item).
  • Arrow keys (Up/Down) can be used to move between menu items (if using menu semantics).
  • Enter/Space activates the focused menu item.
  • Escape closes the dropdown and returns focus to the ellipsis control.

7.4 Visual Accessibility

• Focus indicators:
  • Must be clearly visible on all interactive breadcrumb elements.
• Color contrast:
  • Text and interactive states (default, hover, focus, visited) must meet at least 4.5:1 contrast.

7.5 Labels and Announcements

• Breadcrumb labels:
  • Must be understandable out of context (self‑describing for screen reader users).
• Ellipsis control:
  • Must expose an accessible name describing its function, e.g.:
    • aria-label="Show hidden breadcrumb levels".