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

// 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"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-breadcrumb></dhl-breadcrumb>

Vue.js

// with @dhl-official/vue-library:
import { DhlBreadcrumb } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlBreadcrumb } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlBreadcrumb>
  <DhlBreadcrumbItem href="/">Home</DhlBreadcrumbItem>
  <DhlBreadcrumbItem href="/section">Breadcrumb label</DhlBreadcrumbItem>
  <DhlBreadcrumbItem href="/section/page">Breadcrumb label</DhlBreadcrumbItem>
</DhlBreadcrumb>

Angular

<dhl-breadcrumb>
  <dhl-breadcrumb-item href="/">Home</dhl-breadcrumb-item>
  <dhl-breadcrumb-item href="/section">Breadcrumb label</dhl-breadcrumb-item>
  <dhl-breadcrumb-item href="/section/page">Breadcrumb label</dhl-breadcrumb-item>
</dhl-breadcrumb>

Vue.js

<dhl-breadcrumb>
  <dhl-breadcrumb-item href="/">Home</dhl-breadcrumb-item>
  <dhl-breadcrumb-item href="/section">Breadcrumb label</dhl-breadcrumb-item>
  <dhl-breadcrumb-item href="/section/page">Breadcrumb label</dhl-breadcrumb-item>
</dhl-breadcrumb>

Examples

Default

The full trail. The last item is the current page and is not a link.

HomeBreadcrumb labelBreadcrumb label

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.

HomeSection ASection BBreadcrumb labelBreadcrumb label

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	`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	`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 dhl-breadcrumb — hides the entry when collapsed behind the ellipsis in compact mode. Do not set directly.	boolean	false
isCurrent	is-current	Managed by 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 dhl-breadcrumb — renders the entry as the collapsed ellipsis in compact mode. Do not set directly.	boolean	false
isFirst	is-first	Managed by 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

• dhl-icon-wrapper
• dhl-icon
• dhl-text-sr-only
• dhl-text
• dhl-button

Graph

---

Built by DHL User Interface Library Team!