Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-breadcrumb-item>
A single crumb within lit-material-breadcrumbs — a real <a> link, or
plain text for the current page. Renders its own trailing separator via
:host(:not(:last-of-type))::after, so the parent needs no JS
coordination to know which crumb is last; override
--lit-material-breadcrumb-separator to use something other than "/".
Properties
Property
Attribute
Type
Default
Description
href
href
string
""
current
current
boolean
false
Marks this as the current page: always renders as plain text (even if href is set) with aria-current="page".
Slots
Slot
Description
default
The crumb's label.
CSS parts
Part
Description
crumb
The link or current-page text.
<lit-material-breadcrumbs>
Groups lit-material-breadcrumb-item elements into a <nav> wrapping an
<ol> — an ordered list, since a breadcrumb trail genuinely is a sequence.
<ol> has an implicit ARIA list role on its own; nothing extra to set
there. Each item sets its own role="listitem" (see that component), and
draws its own trailing separator, so this container needs no JS logic
beyond rendering the wrapper.
Properties
Property
Attribute
Type
Default
Description
label
label
string
"Breadcrumb"
The <nav> landmark's accessible name.
Slots
Slot
Description
default
lit-material-breadcrumb-item elements, in order from the root down to the current page.