---
title: Breadcrumbs
description: Breadcrumbs
element: vaadin-breadcrumbs
---

## 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.

```html
<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](https://vaadin.com/docs/latest/styling/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](#breadcrumbsi18n)

## Types

### BreadcrumbsI18n

```ts
export interface BreadcrumbsI18n {
  moreItems?: string;
}
```