Breadcrumb
NavigationDisplays the current page location within a navigation hierarchy.
Playground
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | BreadcrumbItem[] | — | Array of { label, href? } items. |
Examples
Basic
vue
<DsBreadcrumb :items='[{"label":"Home","href":"#"},{"label":"Current page"}]' />Deep
vue
<DsBreadcrumb :items='[{"label":"Home","href":"#"},{"label":"Components","href":"#"},{"label":"Navigation","href":"#"},{"label":"Breadcrumb"}]' />Skeleton
Use DsBreadcrumbSkeleton as a loading placeholder while content is being fetched.
2 steps
vue
<DsBreadcrumbSkeleton :steps="2" />3 steps
vue
<DsBreadcrumbSkeleton :steps="3" />4 steps
vue
<DsBreadcrumbSkeleton :steps="4" />Accessibility
- Uses nav[aria-label="Breadcrumb"] container.
- Last item has aria-current="page".