sp-breadcrumb-item
NPM
1.0.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
disabled
disabled
boolean
false
download
download
string | undefined
href
href
string | undefined
label
label
string | undefined
referrerpolicy
referrerpolicy
| 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined
rel
rel
string | undefined
tabIndex
tabIndex
number
target
target
'_blank' | '_parent' | '_self' | '_top' | undefined
value
value
string | undefined
undefined
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>