sp-breadcrumb-item

In progress
compact true false
label
max-visible-items
Examples API

Overview #

For use within an <sp-breadcrumbs> element, an <sp-breadcrumb-item> represents a single item in a list.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/breadcrumbs

Import the side effectful registration of <sp-breadcrumb-item> as follows:

import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';

When looking to leverage the BreadcrumbItem base class as a type and/or for extension purposes, do so via:

import { BreadcrumbItem } from '@spectrum-web-components/breadcrumbs';

Example #

<sp-breadcrumbs>
    <sp-breadcrumb-item value="1">Home</sp-breadcrumb-item>
    <sp-breadcrumb-item value="2">Trend</sp-breadcrumb-item>
    <sp-breadcrumb-item value="3">March 2019 Assets</sp-breadcrumb-item>
</sp-breadcrumbs>

When using the href attribute instead of the value attribute, the breadcrumb item behaves as a regular anchor link.

<sp-breadcrumbs>
    <sp-breadcrumb-item href="/1">Home</sp-breadcrumb-item>
    <sp-breadcrumb-item href="/2">Trend</sp-breadcrumb-item>
    <sp-breadcrumb-item href="/3">March 2019 Assets</sp-breadcrumb-item>
</sp-breadcrumbs>

Disabled #

Disabled breadcrumb items no longer receive focus and keyboard events.

<sp-breadcrumbs>
    <sp-breadcrumb-item disabled value="1">Home</sp-breadcrumb-item>
    <sp-breadcrumb-item disabled value="2">Trend</sp-breadcrumb-item>
    <sp-breadcrumb-item value="3">March 2019 Assets</sp-breadcrumb-item>
</sp-breadcrumbs>