Navigation

`<kern-breadcrumb>`

Path back through a hierarchy (Standort › Raum › Gerät › Einstellungen): child links (kern-link or <a>), the last child is the current page (aria-current="page"). With max-items the middle entries collapse into a „…“ menu; picking one clicks the original link, so app routers still handle it.

Examples

Path to the current page

Children are links (kern-link or <a>); the last child is the current page and gets aria-current="page". A plain text element works for the last entry. label names the navigation.

Haus Seeblick

Ground floor

Bath

Bad Lüftung

<kern-breadcrumb> <kern-link href="#">Haus Seeblick</kern-link> <kern-link href="#">Ground floor</kern-link> <kern-link href="#">Bath</kern-link> <span>Bad Lüftung</span> </kern-breadcrumb>

Collapsing long paths

With max-items the middle entries fold into a „…“ menu that keeps the first and the last entries visible. Picking an entry clicks the original link, so app routers still handle it. label-more names the menu button.

Haus Seeblick

Ground floor

Bath

Bad Lüftung

Settings

Wi-Fi

<kern-breadcrumb max-items="4"> <kern-link href="#">Haus Seeblick</kern-link> <kern-link href="#">Ground floor</kern-link> <kern-link href="#">Bath</kern-link> <kern-link href="#">Bad Lüftung</kern-link> <kern-link href="#">Settings</kern-link> <span>Wi-Fi</span> </kern-breadcrumb>

Properties

labeldefault Path · de Pfad

string | undefined

Accessible name of the navigation.

labelMoreattribute label-more · default More levels · de Weitere Ebenen

string | undefined

maxItemsattribute max-items · default 0

number

Show at most this many entries (first, „…“ and the last ones); 0 shows all.

Slots

(default)

Links; the last one (or a plain text element) is the current page