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

@{
    var crumbs = new[] { new Breadcrumb("Quotes", "/quotes"), new Breadcrumb("Q-1001") };
}
<nav koala-breadcrumbs="crumbs"></nav>

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=""

Centred slot

<koala-breadcrumb-center>

A <koala-breadcrumb-center> child pins a single control to the horizontal centre of the banner (under the navbar's centred home link), switching the banner to a three-column grid. Any remaining content stays in the right-hand actions group. Client View Quote uses it for the staff-only "View in conveyancing/partner area" link.

View in conveyancing area

Centred link beside breadcrumbs + share

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.

Breadcrumb banner

Sticky-top banner that pairs the breadcrumb trail with an optional Share button. Used on the client-facing quote view where the URL is shareable and the trail should stay visible while scrolling.

<koala-breadcrumb-banner>

<koala-breadcrumb-banner breadcrumbs="crumbs" share-title="Q-1001" share-url="@shareUrl" />

Attribute	Values	Notes
breadcrumbs	IReadOnlyList<Breadcrumb>	Required. Trail items in order.
home-url	string?	Home crumb target. Defaults to `/`.
home-label	string	Home crumb text. Defaults to `Home`.
share-title	string?	When set with `share-url`, renders a Share button that opens the Web Share API on supported devices.
share-url	string?	URL to share. Paired with `share-title`.
max-width	string	Container max-width Tailwind class. Defaults to `max-w-screen-2xl`.
padding	string	Container padding. Defaults to `px-4 sm:px-6 md:px-0`.