`<bmx-breadcrumb-item>`

One step of a trail: a link, or - for the step you are already standing on - a piece of text that is deliberately not one.

5 properties · 0 events · 2 methods · 4 parts

Example

A crumb on its own is a link, unless it is the one you are standing on — in which case it is deliberately not one:

Home

Docs

Breadcrumb item

The last crumb draws as text and carries aria-current="page". A link to the page you are already on focuses nothing, changes nothing, and reads to a screen reader exactly like the ones either side of it that do go somewhere.

Leave the href off and put your own link inside, which is what a router wants:

Home

Settings

Billing

Show markup

<div class="row">
  <p style="margin: 0">
    A crumb on its own is a link, unless it is the one you are standing on — in which case it is deliberately not one:
  </p>
</div>

<div class="row">
  <bmx-breadcrumb label="Documentation">
    <bmx-breadcrumb-item href="#/">Home</bmx-breadcrumb-item>
    <bmx-breadcrumb-item href="#/docs">Docs</bmx-breadcrumb-item>
    <bmx-breadcrumb-item current>Breadcrumb item</bmx-breadcrumb-item>
  </bmx-breadcrumb>
</div>

<div class="row">
  <span class="note">
    The last crumb draws as text and carries <code>aria-current="page"</code>. A link to the page you are already on
    focuses nothing, changes nothing, and reads to a screen reader exactly like the ones either side of it that do go
    somewhere.
  </span>
</div>

<div class="row" style="margin-block-start: 1rem">
  <p style="margin: 0">Leave the <code>href</code> off and put your own link inside, which is what a router wants:</p>
</div>

<div class="row">
  <bmx-breadcrumb label="With a router's own link">
    <bmx-breadcrumb-item><a href="#/">Home</a></bmx-breadcrumb-item>
    <bmx-breadcrumb-item><a href="#/settings">Settings</a></bmx-breadcrumb-item>
    <bmx-breadcrumb-item>Billing</bmx-breadcrumb-item>
  </bmx-breadcrumb>
</div>

<bmx-breadcrumb-item href="/reports">Reports</bmx-breadcrumb-item>
<bmx-breadcrumb-item current>Q3 revenue</bmx-breadcrumb-item>

WHY THE LAST CRUMB IS NOT A LINK

A link to the page you are on is a promise the browser cannot keep: it focuses nothing, changes nothing, and reads to a screen reader exactly like the links either side of it that do go somewhere. current draws it as text and marks it aria-current="page", which is what tells a screen-reader user which of these words is where they are. bmx-breadcrumb applies it to the final crumb for you unless you have marked one yourself.

WHY IT DRAWS ITS OWN SEPARATOR

Because a separator belongs to the crumb it precedes, and a crumb that collapses has to take its separator with it. Drawn by the parent instead, every collapse would leave a dangling mark - the same dangling-divider problem bmx-toolbar has to trim its way out of, avoided here by making it impossible rather than by cleaning up after it.

WHAT YOU CAN PUT IN IT

Anything. Give it an href and it draws the link; leave the href off and put your own <a> - a router's link component, most likely - inside it, and it will draw a plain wrapper around yours instead. Both are trails; neither needs this component to know anything about your routing.

Properties

Property	Attribute	Type	Default	Description
`current`	`current`	`boolean`	`false`	Whether this is the page being looked at. Draws as text and marks it.
`href`	`href`	`string`	—	Where the crumb goes. Leave it off for the page you are on, or to wrap your own link.
`label`	`label`	`string`	—	What the overflow menu calls this crumb. Defaults to its text.
`rel`	`rel`	`string`	—	The link's `rel`. `noreferrer` is added to anything opening in a new tab that has not said otherwise, because `target="_blank"` without it hands the opened page a `window.opener` it can navigate - the same hardening `bmx-button` does in anchor mode, and for the same reason.
`target`	`target`	`string`	—	The link's target, when there is a link.

Methods

Method	Signature	Description
`activate`	`activate() => Promise<void>`	Follow this crumb, as though it had been clicked. What the parent calls when the crumb is chosen from the overflow menu. The click lands on the real link, so a router that intercepted it still intercepts it and a handler the author attached still runs - there is no second navigation path to keep in step with the first.
`getLabel`	`getLabel() => Promise<string>`	The crumb's name, for the parent's overflow menu.

Slots

Slot	Description
`(default)`	The crumb's label.
`prefix`	An icon before the label.

CSS shadow parts

Part	Description
`base`	The link, or the text that stands in for it.
`label`	The label text.
`prefix`	The icon slot's wrapper.
`separator`	The mark drawn before the crumb.

CSS custom properties

Property	Description
`--bmx-breadcrumb-color`	A link crumb's colour.
`--bmx-breadcrumb-color-hover`	A link crumb's colour under the pointer.
`--bmx-breadcrumb-current-color`	The colour of the crumb you are on.
`--bmx-breadcrumb-gap`	Space between a separator and the crumb either side of it.
`--bmx-breadcrumb-radius`	The corner radius of a crumb's focus ring and hover shape.
`--bmx-breadcrumb-separator-color`	The separator's colour.
`--bmx-breadcrumb-separator-content`	The mark drawn before a crumb. Set by the parent's `separator` property; override it for a house style.