Navigation to reveal a page’s location within the site hierarchy
Long breadcrumb path shortened to display the last 2 items with hidden links indicated by ellipsis.
Complete breadcrumb string with all items visible.
Can be used to override the default links rendered in the breadcrumb. Useful for integrating with client-side routing, as a router-link
can be rendered instead of a plain a
tag. The slot-scope
exposed includes:
class
: CSS class to be applied to your override element to match the breadcrumb stylinghref
: the path that the link points tocontent
: the text content of that linkTo ensure that usage of this component complies with accessibility guidelines:
aria-current
attribute is not defined for the last itemThis component has compliance with WCAG guidelines by:
aria-label="Breadcrumb"
in the <nav>
element to identify the structure of cdr-breadcrumb
as a breadcrumb path for assistive technologiesaria-expanded="false"
attribute when the user has the ability to expand the breadcrumb pathBreadcrumbs provide context and a sense of place. This is especially important on a small screen, where other orienting content isn’t visible.
Indicate hidden links using an ellipsis.
Truncate breadcrumbs left to right to show the final two links in the trail, so that at least the parent and grandparent are always visible.
items
name
array
type
N/A
default
Sets the array of a breadcrumb object containing a 'url' and 'name' property.
truncationEnabled
name
boolean
type
true
default
Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.
Note: Truncation only occurs if the items
collection contains more than 2 items and the value is set to truncationEnabled=true
.
Find more information about using Slots in the article Getting Started as a Developer.
link
name
Scoped slot used to override the default links used in the breadcrumb. Useful for integrating with client-side routing. The slot scope exposes the following attributes: class, href, and content.
The items
property requires an array of objects, in the format shown above. Notable values include:
item.url
(optional) string where the breadcrumb item segment links when clicked or tappeditem.name
(required) string for the breadcrumb text item segmentThe array must be ordered appropriately from low index rendered on the left, to high index on the right.
The below example shows alternatively setting items
using an array literal.
<cdr-breadcrumb
:items="[
{item:{url:'', name: 1}},
{item:{url:'', name: 2}},
{item:{url:'', name: 3}}
]"
/>
Use truncationEnabled
to disable the truncation functionality. The example below shows truncation being disabled.
<cdr-breadcrumb
:truncation-enabled="false"
:items="[
{item:{url:'', name: 1}},
{item:{url:'', name: 2}},
{item:{url:'', name: 3}}
]"
/>