Breadcrumb

Storybook GitHub

<script setup lang="ts">
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";

const items = [
  { label: "Home", to: "#" },
  { label: "Products", to: "#" },
  { label: "Shoes" },
];
</script>

<template>
  <mt-breadcrumb :items="items" />
</template>

Usage

Breadcrumb shows the path from the root of a hierarchy to the current page and lets users jump back to any level along the way. Use it on nested pages such as folders, categories, or documents, where users need to understand where they are and move within that structure. It is a secondary aid that complements the main navigation rather than replacing it, and it always ends with the current page.

import { MtBreadcrumb, type BreadcrumbItem } from "@shopware-ag/meteor-component-library";

Pass the trail as items, ordered from the root to the current page. Every item has a label. An item with a to renders as a link, and the last item always renders as the current page, so its to is ignored. Links render as a router-link by default. Use the link-as prop to render a different element or component for all links, for example link-as="a" in an app without a router, and set as on a single item to override it. A plain anchor needs a string to, because an object cannot become an href.

Examples

Sizes

<script setup lang="ts">
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";

const items = [
  { label: "Home", to: "#" },
  { label: "Products", to: "#" },
  { label: "Shoes" },
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <mt-breadcrumb :items="items" size="xs" />
    <mt-breadcrumb :items="items" size="s" />
  </div>
</template>

Truncating long labels

Labels are shown in full as long as the trail fits. As the container gets narrower, long labels shrink with an ellipsis, down to 8 characters, before any crumb is hidden. Drag the corner of the box to try it.

<script setup lang="ts">
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";

const items = [
  { label: "Home", to: "#" },
  { label: "Clothing and accessories for every season of the year", to: "#" },
  { label: "Shoes" },
];
</script>

<template>
  <div
    style="
      width: 480px;
      max-width: 100%;
      resize: horizontal;
      overflow: hidden;
      padding: 8px;
      border: 1px dashed var(--color-border-primary-default);
    "
  >
    <mt-breadcrumb :items="items" />
  </div>
</template>

Collapsing on narrow containers

When the trail does not fit, the labels shrink first. Once they have reached their minimum width, the crumbs in the middle disappear behind an ellipsis, beginning with the one next to the root. Drag the corner of the box to watch crumbs shrink, disappear, and come back.

<script setup lang="ts">
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";

const items = [
  { label: "Home", to: "#" },
  { label: "Catalog", to: "#" },
  { label: "Clothing and accessories for every season", to: "#" },
  { label: "Shoes", to: "#" },
  { label: "Sneakers", to: "#" },
  { label: "Running shoes" },
];
</script>

<template>
  <div
    style="
      width: 360px;
      max-width: 100%;
      resize: horizontal;
      overflow: hidden;
      padding: 8px;
      border: 1px dashed var(--color-border-primary-default);
    "
  >
    <mt-breadcrumb :items="items" />
  </div>
</template>

Wrapping instead of collapsing

Drag the corner of the box to see the crumbs flow onto additional lines.

<script setup lang="ts">
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";

const items = [
  { label: "Home", to: "#" },
  { label: "Catalog", to: "#" },
  { label: "Clothing and accessories for every season", to: "#" },
  { label: "Shoes", to: "#" },
  { label: "Sneakers", to: "#" },
  { label: "Running shoes" },
];
</script>

<template>
  <div
    style="
      width: 360px;
      max-width: 100%;
      resize: horizontal;
      overflow: hidden;
      padding: 8px;
      border: 1px dashed var(--color-border-primary-default);
    "
  >
    <mt-breadcrumb :items="items" overflow="wrap" />
  </div>
</template>

Custom crumb content

The item slot replaces the label of every crumb. It receives the item, its index, and whether it is the current page. The component still renders the links, separators, and collapsing.

<script setup lang="ts">
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";
import MtText from "@shopware-ag/meteor-component-library/MtText";

const items = [
  { label: "Media", to: "#" },
  { label: "Product images", to: "#" },
  { label: "Summer campaign" },
];
</script>

<template>
  <mt-breadcrumb :items="items">
    <template #item="{ item, current }">
      {{ item.label }}
      <mt-text
        v-if="current"
        as="span"
        size="xs"
        color="color-text-tertiary-default"
      >
        (24 files)
      </mt-text>
    </template>
  </mt-breadcrumb>
</template>

From the current route

Build the items from the route segments and mark nothing by hand: the last item is the current page automatically. useRoute comes from vue-router.

<script setup lang="ts">
import { computed } from "vue";
import MtBreadcrumb from "@shopware-ag/meteor-component-library/MtBreadcrumb";

const route = useRoute();

const items = computed(() => {
  const segments = route.path.split("/").filter(Boolean);

  return segments.map((segment, index) => ({
    label:
      segment.charAt(0).toUpperCase() + segment.slice(1).replaceAll("-", " "),
    to: `/${segments.slice(0, index + 1).join("/")}`,
  }));
});
</script>

<template>
  <mt-breadcrumb :items="items" />
</template>

API reference

Props

Prop	Type	Default
`items` * The crumbs from the root of the hierarchy to the current page. An item with a `to` renders as a link, the last item always renders as the current page.	`BreadcrumbItem[]`
`size` The text size of all crumbs.	`"s" \| "xs"`	`"xs"`
`overflow` How the breadcrumb behaves when the crumbs do not fit into the available width. `collapse` keeps everything on one line, shrinks long labels with an ellipsis and then hides middle crumbs behind an ellipsis, `wrap` lets the crumbs flow onto further lines.	`"collapse" \| "wrap"`	`"collapse"`
`aria-label` The accessible name of the navigation landmark. Defaults to a translated "Breadcrumb".	`string`	`undefined`
`link-as` The element or component that renders a link crumb. An item can override it with `as`.	`string \| Component`	`"router-link"`

Events

Event	Payload
`click`	`[item: BreadcrumbItem, event: MouseEvent]`

Slots

Slot	Bindings
`item` Replaces the label of a crumb. Receives the item, its index and whether it is the current page.	`{ item: BreadcrumbItem; index: number; current: boolean; }`

Best practices

Keep labels short and use the same names as in the navigation and page titles.
End the items with the current page.
Give every item except the last one a to, so users can move up to any level.

Don't

Do not use Breadcrumb as the only way to reach a page, and do not use it as a replacement for the main navigation.
Do not put the current page into the items twice, for example once as a link and once as the last item.

Behavior

Breadcrumb fills the available width of its container and keeps all crumbs on a single line by default. Inside a flex row, set min-width: 0 or flex: 1 on it so the row is allowed to shrink it.
The last item is the current page. It is rendered as text, never as a link, and carries aria-current="page".
Breadcrumb observes its own width and reacts immediately when the container, the viewport, or the items change.
As long as the trail fits, every label is shown in full.
When the trail no longer fits, labels shrink and show an ellipsis. Long labels shrink first, and no label becomes narrower than 8 characters.
If the trail still does not fit once every label has reached its minimum width, the crumbs in the middle are hidden behind an ellipsis, beginning with the one next to the root. The root is hidden last, and the current page is never hidden.
Set overflow="wrap" to let the crumbs flow onto additional lines instead of collapsing. Only a label wider than the whole container is truncated in this mode.
Hidden crumbs come back as soon as there is enough space again. Their pages remain reachable through the main navigation.

Accessibility

The trail is a nav landmark that contains an ordered list, so screen readers announce it as breadcrumb navigation and read the levels in order. Use aria-label to change the name of the landmark.
The current page carries aria-current="page".
Separators and the ellipsis are hidden from assistive technology.
Links can be reached with the Tab key and show a visible focus ring. The current page is plain text and cannot be focused.
Hidden crumbs are not announced. Keep the number of levels small so that the trail rarely needs to collapse on the viewports you support.
Content in the item slot renders inside the crumb's link, so it must not contain links, buttons, or other interactive elements.

Link: for a single inline link rather than a path.
Tabs: for switching between peer sections of the same page.
Pagination: for moving through pages of the same list.

Edit this pageorReport an issue

Banner

A persistent, inline message that stays visible in the page layout.

Button

The standard action trigger for Meteor interfaces.