BREADCRUMB

When to Use

Example: trail above page content (skeleton)

  • Multi-level hierarchical sites where users need to understand their current location
  • Pages deeper than two levels that benefit from quick back-navigation
  • Admin dashboards, documentation sites, or e-commerce category flows
  • Not needed for flat single-level navigation or mobile-first apps with limited screen width

Usage Guidelines

DO

Use only in sites/apps with a clear hierarchy (e.g. category → subcategory → detail page). The last item should always be the current page with no href. Keep the path complete — don't skip levels

Don’t

Don't use in flat-structured (non-hierarchical) applications. Don't use breadcrumbs as a substitute for primary navigation. Don't show more than 5 levels (consider collapsing middle levels beyond that)

Interaction Behavior

LevelsUse Case
2 levelsRoot → current
3–4 levelsTypical category navigation
5 levelsMaximum recommended depth; consider collapsing beyond

Accessibility

  • Breadcrumb root uses semantic <nav> with aria-label="Breadcrumb"
  • Items are rendered in an ordered list <ol> for assistive technology
  • Current page item uses <span> (no link), providing clear indication of location