Breadcrumb
The Breadcrumb component provides a secondary navigation trail that helps users
track their current location within the application's hierarchy. It is composed of
Breadcrumb and BreadcrumbItem: the last item is the current page, every other
item is a link. It supports two layout types: default (the full trail) and
compact (middle items collapsed behind a … ellipsis).
Import
- React
- Angular
- Vue.js
// with @dhl-official/react-library:
import { DhlBreadcrumb } from "@dhl-official/react-library"
// with @dhl-official/ui-libraries/react-library:
import { DhlBreadcrumb } from "@dhl-official/ui-libraries/react-library"
If the DUIL has been installed, you can use the web component directly:
<duil310-dhl-breadcrumb></duil310-dhl-breadcrumb>
If the DUIL has been installed, you can use the web component directly:
<duil310-dhl-breadcrumb></duil310-dhl-breadcrumb>
Code
- React
- Angular
- Vue.js
<DhlBreadcrumb>
<DhlBreadcrumbItem href="/">Home</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/section">Breadcrumb label</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/section/page">Breadcrumb label</DhlBreadcrumbItem>
</DhlBreadcrumb>
<duil310-dhl-breadcrumb>
<duil310-dhl-breadcrumb-item href="/">Home</duil310-dhl-breadcrumb-item>
<duil310-dhl-breadcrumb-item href="/section">Breadcrumb label</duil310-dhl-breadcrumb-item>
<duil310-dhl-breadcrumb-item href="/section/page">Breadcrumb label</duil310-dhl-breadcrumb-item>
</duil310-dhl-breadcrumb>
<duil310-dhl-breadcrumb>
<duil310-dhl-breadcrumb-item href="/">Home</duil310-dhl-breadcrumb-item>
<duil310-dhl-breadcrumb-item href="/section">Breadcrumb label</duil310-dhl-breadcrumb-item>
<duil310-dhl-breadcrumb-item href="/section/page">Breadcrumb label</duil310-dhl-breadcrumb-item>
</duil310-dhl-breadcrumb>
Examples
Default
The full trail. The last item is the current page and is not a link.
Code example
<DhlBreadcrumb>
<DhlBreadcrumbItem href="/">Home</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/section">Breadcrumb label</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/section/page">Breadcrumb label</DhlBreadcrumbItem>
</DhlBreadcrumb>
Compact
With type="compact", the middle items collapse behind a … ellipsis once the
trail has more than three entries — the first item and the last two stay visible.
Code example
<DhlBreadcrumb type="compact">
<DhlBreadcrumbItem href="/">Home</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/a">Section A</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/b">Section B</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/section">Breadcrumb label</DhlBreadcrumbItem>
<DhlBreadcrumbItem href="/section/page">Breadcrumb label</DhlBreadcrumbItem>
</DhlBreadcrumb>
Interactive Demo
Readme
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dataClassName | data-class-name | An optional class name prop for the component. | string | undefined |
dataId | data-id | An optional prop. Gives a valid HTML ID attribute value for the component. | string | `duil310-dhl-breadcrumb-${getRandomString()}` |
dataTestid | data-testid | An optional prop. The test id attached to the component as a data-testid attribute. | string | undefined |
type | type | An optional prop to select the breadcrumb layout type. "default" shows the full trail. "compact" collapses the middle items behind a … ellipsis once there are more than three entries. | "compact" | "default" | DHL_BREADCRUMB.TYPE.DEFAULT |
Slots
| Slot | Description |
|---|---|
"unnamed" | unnamed children slot intended for multiple DhlBreadcrumbItem components |
Built by DHL User Interface Library Team!
Readme — Breadcrumb Item
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dataAriaLabel | data-aria-label | An optional prop defining the text read by the screen reader to represent the link; use this if you need different text to be read from the visible label. | string | undefined |
dataClassName | data-class-name | An optional class name prop for the component. | string | undefined |
dataId | data-id | An optional prop. Gives a valid HTML ID attribute value for the component. | string | `duil310-dhl-breadcrumb-item-${getRandomString()}` |
dataTestid | data-testid | An optional prop. The test id attached to the component as a data-testid attribute. | string | undefined |
dataTracking | data-tracking | An optional data tracking prop for the component. | string | undefined |
href | href | An optional prop. The destination URL of the trail entry. When set, the item renders as a link. Note: ignored on the current (last) item. The current page is always rendered as non-interactive text with aria-current="page", per WAI-ARIA breadcrumb pattern. | string | undefined |
isCollapsed | is-collapsed | Managed by duil310-dhl-breadcrumb — hides the entry when collapsed behind the ellipsis in compact mode. Do not set directly. | boolean | false |
isCurrent | is-current | Managed by duil310-dhl-breadcrumb — marks the current page (last entry), rendered as non-interactive text with aria-current="page". Do not set directly. | boolean | false |
isEllipsis | is-ellipsis | Managed by duil310-dhl-breadcrumb — renders the entry as the collapsed ellipsis in compact mode. Do not set directly. | boolean | false |
isFirst | is-first | Managed by duil310-dhl-breadcrumb — marks the first entry, which has no leading separator. Do not set directly. | boolean | false |
Slots
| Slot | Description |
|---|---|
"unnamed" | unnamed children slot for the trail entry's label |
Dependencies
Depends on
- duil310-dhl-icon-wrapper
- duil310-dhl-icon
- duil310-dhl-text-sr-only
- duil310-dhl-text
- duil310-dhl-button
Graph
Built by DHL User Interface Library Team!