Breadcrumbs is a component for showing layered navigation states.


The truncate class gives ellipses if the breadcrumbs are too long, but it needs inline on the items (use narrow screen to see it in action).

This demos use separator see documentation for more info.

For accessibility purpose use <nav></nav> with an accessible name assigning [aria-label] or [aria-labelledby].

For seo purpose add breadscrumb metadata.