ELFBAR

Breadcrumb

Navigation aid showing the user's current location in the application hierarchy, supporting any depth.

Breadcrumb displays the complete navigation path from the root to the current page. Each clickable item ends with a > separator; the final current-page item is non-clickable and visually distinguished with a disabled color.

Anatomy

Home  >  Pod System  >  ELFA Series  >  ELFA Pro
 ↑            ↑               ↑            ↑
link        link             link       current page
(text-primary)                          (text-disabled)
  1. Link Item — Clickable navigation item with a trailing ChevronRight separator icon
  2. Current Page — Final item, aria-current="page", text-disabled color, not clickable
  3. Container (<nav>) — Semantic container with aria-label="Breadcrumb"

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)

Depth Guidelines

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