Components Breadcrumbs

Breadcrumbs

Page navigation trail. Desktop renders a chevron-separated trail from a home icon; mobile collapses to a single back link to the parent.

<koala-breadcrumbs>

Canonical

Home icon, intermediate parents linked, current page as muted text. Mobile collapses to a back-arrow row.

Variants

4 variants

One level

breadcrumbs=1

Two levels

breadcrumbs=2

Three levels

breadcrumbs=3

Mobile — back to parent

md:hidden

States

2 states

Banner with share — <koala-breadcrumb-banner>

Home suppressed — home-url=""

Props

3 attributes

Attribute	Values	Notes
koala-breadcrumbs	IReadOnlyList<Breadcrumb>	Required. Last entry is the current page (rendered muted, no link).
koala-breadcrumbs-home-url	string?	Defaults to `/`. Set empty to hide the home icon.
koala-breadcrumbs-home-label	string	Defaults to `Home`. Used as the `aria-label` on the home icon and the mobile back-link when there's no parent.

Do & don't

Do Use breadcrumbs only on detail pages with a real parent hierarchy. Last entry is the current page — muted, no link.

Don't Don't add breadcrumbs to top-level pages. If the user is already on Home, the trail just shows the icon and the current page — it adds noise without aiding navigation.