`<vaadin-breadcrumbs>`

`<vaadin-breadcrumbs>` is a Web Component that displays the user's location within a hierarchy as a trail of links from the root to the current page.

Category: Navigation
Built with: Lit
Library: Vaadin
Author: Vaadin
Package: @vaadin/breadcrumbs
Component size: 12.6 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular: 3 out of 5
Downloads: 25,920/week · jsDelivr 1,618 hits/month (whole @vaadin/breadcrumbs package)
Latest stable version: 25.3.2
Last published: Oct 2, 2026
Component last changed: Sep 22, 2026 (in 25.3.0)
License: Apache-2.0

<vaadin-breadcrumbs> is a Web Component that displays the user's location within a hierarchy as a trail of links from the root to the current page.

<vaadin-breadcrumbs>
  <vaadin-breadcrumbs-item path="/">Home</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/docs">Docs</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item>Current page</vaadin-breadcrumbs-item>
</vaadin-breadcrumbs>

Styling

The following shadow DOM parts are available for styling:

Part name	Description
`list`	The element with `role="list"` wrapping all items.
`overflow`	The element wrapping the overflow button.
`overflow-button`	The button that reveals collapsed items.
`overlay`	The outer panel of the overflow overlay.
`overlay-content`	The inner wrapper of the overflow overlay.

The following state attributes are available for styling:

Attribute	Description
`has-overflow`	Set when one or more items are collapsed into the overflow overlay.

The following custom CSS properties are available for styling:

Custom CSS property
`--vaadin-breadcrumbs-font-size`
`--vaadin-breadcrumbs-font-weight`
`--vaadin-breadcrumbs-gap`
`--vaadin-breadcrumbs-line-height`
`--vaadin-breadcrumbs-link-color`
`--vaadin-breadcrumbs-overflow-icon`
`--vaadin-breadcrumbs-separator-icon`
`--vaadin-breadcrumbs-text-color`

See Styling Components documentation.

Attributes

i18n
theme