sp-breadcrumb-item
NPM
1.1.2
Storybook
View Storybook
Try it on
webcomponents.dev
Overview #
For use within an <sp-breadcrumbs>
element, an <sp-breadcrumb-item>
represents a single item in a list.
Usage #
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>
Links #
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>