sp-breadcrumb-item

compact true false
label
max-visible-items

NPM

0.47.2

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description disabled disabled boolean false Disable this control. It will not receive focus or events download download string | undefined Causes the browser to treat the linked URL as a download. href href string | undefined The URL that the hyperlink points to. label label string | undefined An accessible label that describes the component. It will be applied to aria-label, but not visually rendered. 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 How much of the referrer to send when following the link. rel rel string | undefined The relationship of the linked URL as space-separated link types. tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property target target '_blank' | '_parent' | '_self' | '_top' | undefined Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). 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 #

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>

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>