> Markdown version of [Breadcrumbs](https://vaadin.com/docs/next/components/breadcrumbs). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Breadcrumbs (since V25.2)

Breadcrumbs show the user’s location within an application’s hierarchy and provide links back to higher levels.

## <a id="basic-usage"></a>Basic Usage

A Breadcrumbs component contains an ordered set of items that represent the path from a top-level location to the current page. Each item that has a path renders as a link, while the last item — which has no path — represents the current page and isn’t a link.

> **Note: Navigation Disabled in Examples**
>
> For technical reasons, actual navigation is disabled in the examples on this page.

**Lit** — `breadcrumbs-basic.ts`

```html
<vaadin-breadcrumbs>
  <vaadin-breadcrumbs-item path="/">Home</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/components">Components</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item>Breadcrumbs</vaadin-breadcrumbs-item>
</vaadin-breadcrumbs>
```

**Flow** — `BreadcrumbsBasic.java`

```java
Breadcrumbs breadcrumbs = new Breadcrumbs(Breadcrumbs.Mode.MANUAL);

BreadcrumbsItem home = new BreadcrumbsItem("Home", "/");
BreadcrumbsItem components = new BreadcrumbsItem("Components",
        "/components");
BreadcrumbsItem current = new BreadcrumbsItem("Breadcrumbs");

breadcrumbs.add(home, components, current);
```

**React** — `breadcrumbs-basic.tsx`

```tsx
<Breadcrumbs ref={breadcrumbsRef}>
  <BreadcrumbsItem path="/">Home</BreadcrumbsItem>
  <BreadcrumbsItem path="/components">Components</BreadcrumbsItem>
  <BreadcrumbsItem>Breadcrumbs</BreadcrumbsItem>
</Breadcrumbs>
```

## <a id="items"></a>Items

Each item in a Breadcrumbs is a `BreadcrumbsItem` (Flow) or a `<vaadin-breadcrumbs-item>` (Lit) / `<BreadcrumbsItem>` (React). An item’s role depends on whether it has a path:

- An item **with a path** renders as a link that navigates to the corresponding location.

- An item **without a path** represents the current page. The component automatically marks the last path-less item as current, rendering it as plain, non-interactive text.

### <a id="prefix-icons"></a>Prefix Icons

An item can include an icon, or other content, in its prefix slot. This is useful for adding a visual cue, such as a home icon for the root of the hierarchy.

**Lit** — `breadcrumbs-icons.ts`

```html
<vaadin-breadcrumbs>
  <vaadin-breadcrumbs-item path="/">
    <vaadin-icon icon="vaadin:home" slot="prefix"></vaadin-icon>
    Home
  </vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/orders">
    <vaadin-icon icon="vaadin:package" slot="prefix"></vaadin-icon>
    Orders
  </vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item>Order Details</vaadin-breadcrumbs-item>
</vaadin-breadcrumbs>
```

**Flow** — `BreadcrumbsIcons.java`

```java
Breadcrumbs breadcrumbs = new Breadcrumbs(Breadcrumbs.Mode.MANUAL);

BreadcrumbsItem home = new BreadcrumbsItem("Home", "/",
        VaadinIcon.HOME.create());
BreadcrumbsItem orders = new BreadcrumbsItem("Orders", "/orders",
        VaadinIcon.PACKAGE.create());
BreadcrumbsItem current = new BreadcrumbsItem("Order Details");

breadcrumbs.add(home, orders, current);
```

**React** — `breadcrumbs-icons.tsx`

```tsx
<Breadcrumbs ref={breadcrumbsRef}>
  <BreadcrumbsItem path="/">
    <Icon icon="vaadin:home" slot="prefix" />
    Home
  </BreadcrumbsItem>
  <BreadcrumbsItem path="/orders">
    <Icon icon="vaadin:package" slot="prefix" />
    Orders
  </BreadcrumbsItem>
  <BreadcrumbsItem>Order Details</BreadcrumbsItem>
</Breadcrumbs>
```

## <a id="modes"></a>Modes

In Flow, the Breadcrumbs component operates in one of two modes, defined by the `Breadcrumbs.Mode` enum: `ROUTER` (the default) and `MANUAL`.

### <a id="router-mode"></a>Router Mode

In `ROUTER` mode — the default — the trail is built automatically from the route hierarchy. On every navigation, the component resolves the chain of routes leading to the current view, adding a linked item for each ancestor route and a non-link item for the current page.

Parent routes are resolved from the `@RouteParent` annotation or, when routes follow the URL structure, from the URL path. Each item’s label is the route’s page title (set with `@PageTitle`, `HasDynamicTitle`, or a `PageTitleGenerator`), resolved without instantiating the ancestor views. For more, see [Route Hierarchy](https://vaadin.com/docs/next/flow/routing/route-hierarchy.md) and [Page Titles](https://vaadin.com/docs/next/flow/routing/page-titles.md).

```java
@Route("orders")
@PageTitle("Orders")
public class OrdersView extends VerticalLayout {
}

@Route("order-details")
@RouteParent(OrdersView.class)
@PageTitle("Order Details")
public class OrderDetailsView extends VerticalLayout {

    public OrderDetailsView() {
        // In ROUTER mode, the trail is built automatically from the route
        // hierarchy; no items are added manually.
        add(new Breadcrumbs());
    }
}
```

> **Note:** In `ROUTER` mode, adding, removing, or replacing items manually throws an `IllegalStateException`. To manage items yourself, use `MANUAL` mode.

### <a id="manual-mode"></a>Manual Mode

In `MANUAL` mode, you build the trail explicitly by adding `BreadcrumbsItem` instances. This is useful when the breadcrumb structure doesn’t map directly onto the route hierarchy. Switching modes clears the existing trail.

```java
Breadcrumbs breadcrumbs = new Breadcrumbs(Breadcrumbs.Mode.MANUAL);

BreadcrumbsItem home = new BreadcrumbsItem("Home", "/");
BreadcrumbsItem orders = new BreadcrumbsItem("Orders", "/orders");
BreadcrumbsItem current = new BreadcrumbsItem("Order Details");

breadcrumbs.add(home, orders, current);
```

## <a id="overflow"></a>Overflow

Breadcrumbs adapts responsively to the available width. When the items don’t all fit, the leading items collapse into an overflow menu, accessible through a button at the start of the trail. The last item, representing the current page, never collapses.

**Lit** — `breadcrumbs-overflow.ts`

```html
<vaadin-breadcrumbs style="width: 300px">
  <vaadin-breadcrumbs-item path="/">Home</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/catalog">Catalog</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/catalog/electronics">Electronics</vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/catalog/electronics/computers">
    Computers
  </vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item path="/catalog/electronics/computers/laptops">
    Laptops
  </vaadin-breadcrumbs-item>
  <vaadin-breadcrumbs-item>Model X1</vaadin-breadcrumbs-item>
</vaadin-breadcrumbs>
```

**Flow** — `BreadcrumbsOverflow.java`

```java
Breadcrumbs breadcrumbs = new Breadcrumbs(Breadcrumbs.Mode.MANUAL);

breadcrumbs.add(new BreadcrumbsItem("Home", "/"),
        new BreadcrumbsItem("Catalog", "/catalog"),
        new BreadcrumbsItem("Electronics", "/catalog/electronics"),
        new BreadcrumbsItem("Computers",
                "/catalog/electronics/computers"),
        new BreadcrumbsItem("Laptops",
                "/catalog/electronics/computers/laptops"),
        new BreadcrumbsItem("Model X1"));

breadcrumbs.setWidth("300px");
```

**React** — `breadcrumbs-overflow.tsx`

```tsx
<Breadcrumbs ref={breadcrumbsRef} style={{ width: '300px' }}>
  <BreadcrumbsItem path="/">Home</BreadcrumbsItem>
  <BreadcrumbsItem path="/catalog">Catalog</BreadcrumbsItem>
  <BreadcrumbsItem path="/catalog/electronics">Electronics</BreadcrumbsItem>
  <BreadcrumbsItem path="/catalog/electronics/computers">Computers</BreadcrumbsItem>
  <BreadcrumbsItem path="/catalog/electronics/computers/laptops">Laptops</BreadcrumbsItem>
  <BreadcrumbsItem>Model X1</BreadcrumbsItem>
</Breadcrumbs>
```

## <a id="internationalization-i18n"></a>Internationalization (i18n)

Breadcrumbs provides an API for localization. Currently, only the accessible label for the overflow menu button (announced by screen readers) can be customized.

**Lit**

```typescript
breadcrumbs.i18n = { moreItems: 'More items' };
```

**Flow**

```java
breadcrumbs.setI18n(new Breadcrumbs.BreadcrumbsI18n().setMoreItems("More items"));
```

**React**

```tsx
<Breadcrumbs i18n={{ moreItems: 'More items' }}>
  {/* ... */}
</Breadcrumbs>
```

## <a id="accessibility"></a>Accessibility

The component renders with the `navigation` landmark role, so assistive technologies announce it as a navigation region. The current page — the last path-less item — is marked with `aria-current="page"`. Items that have a path are rendered as links and are reachable and operable with the keyboard.