Breadcrumb Item

<wa-breadcrumb-item> Since 2.0 stable

Breadcrumb Items are used inside breadcrumbs to represent different links.

This component must be used as a child of <wa-breadcrumb>. Please see the Breadcrumb docs to see examples of this component in action.

Slots

Learn more about using slots.

Name Description
(default) The breadcrumb item's label.
start An element, such as <wa-icon>, placed before the label.
end An element, such as <wa-icon>, placed after the label.
separator The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on <wa-breadcrumb> instead.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
href
href
Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered internally. When unset, a button will be rendered instead.
Type string | undefined
target
target
Tells the browser where to open the link. Only used when href is set.
Type '_blank' | '_parent' | '_self' | '_top' | undefined
rel
rel
The rel attribute to use on the link. Only used when href is set.
Type string
Default 'noreferrer noopener'

CSS parts

Learn more about CSS parts.

Name Description
label The breadcrumb item's label.
start The container that wraps the start slot.
end The container that wraps the end slot.
separator The container that wraps the separator.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/[email protected]/dist/components/breadcrumb-item/breadcrumb-item.js';
        

To manually import this component from NPM, use the following code.

import '@awesome.me/webawesome/dist/components/breadcrumb-item/breadcrumb-item.js';
        

To manually import this component from React, use the following code.

import '@awesome.me/webawesome/dist/react/breadcrumb-item';
        
Need a hand? Report a bug Ask for help
    No results