Vaadin WC API reference

Breadcrumbs

View as MD

Description

<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-overflow-icon
--vaadin-breadcrumbs-separator

See Styling Components documentation.

Properties

i18n

Type: BreadcrumbsI18n

The object used to localize this component. To change the default localization, replace this with an object that provides all properties, or just the individual properties you want to change.

The object has the following JSON structure and default values:

{
  // Accessible label of the overflow button revealing collapsed items.
  moreItems: 'More items'
}

See also: BreadcrumbsI18n

Types 

export interface BreadcrumbsI18n {
  moreItems?: string;
}