Breadcrumb
<wa-breadcrumb>
Breadcrumbs display a trail of links that show users where they are in a site's hierarchy. They help users understand the current location and navigate back to parent pages.
Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
Examples
Breadcrumb Links
By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
The last item represents the current page. Use href="" so it points at itself — <wa-breadcrumb> will mark it with aria-current="page" and style it as non-interactive for you.
Start & End Decorations
Use the start and end slots to add presentational elements like <wa-icon> next to any breadcrumb item.
Custom Separators
Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
Custom Colors
Breadcrumb labels match the color set on <wa-breadcrumb-item>. Content in the start, end, and separator slots can be styled using CSS parts.
With Dropdowns
Dropdown menus can be placed in the default slot to provide additional options.
Alternatively, you can place dropdown menus in a start or end slot.
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/breadcrumb/breadcrumb.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/breadcrumb/breadcrumb.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/breadcrumb/breadcrumb.js';
To import this component for React 18 or below, use the following code:
import WaBreadcrumb from '@awesome.me/webawesome/dist/react/breadcrumb/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | One or more breadcrumb items to display. |
separator
|
The separator to use between breadcrumb items. Works best with <wa-icon>. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
labellabel |
The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
screen readers and other assistive devices to provide more context for users.
Type
stringDefault
'' |
CSS parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.