Breadcrumb
A breadcrumb component.
Installation
npx wdc add breadcrumbExamples
Basic
Standard breadcrumb using semantic list items.
Custom Separator
You can replace the default chevron with a slash or any icon.
Data Driven
Generate breadcrumbs automatically from an array of objects.
API Reference
| Input | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | [] | Array of data to generate breadcrumbs automatically. |
| class | string | '' | Custom classes for the nav container. |
| url | string | undefined | The router link. If omitted, renders as active text (current page). |
| target | string | '_self' | Target attribute for the link. |
check_circle
SEO & Accessibility
SEO Optimized Structure
This component uses the following:
<nav>elementaria-label="breadcrumb"ollist for Rich Snippets.
Check out Google Search Central for more details.