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. In an app without a router, set link-as="a" to render plain anchors instead. You can also pass any other element or component, and a single item can override it with its own as. Anything other than router-link receives the item's to value as its href, so it must be a URL string, not a route object.

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 move into a menu behind the ellipsis button, beginning with the one next to the root. Drag the corner of the box to watch crumbs shrink, disappear, and come back, and open the menu to reach the hidden levels.

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

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]`

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 button, beginning with the one next to the root. The root is hidden last, and the current page is never hidden.
The ellipsis button opens a menu that lists the hidden levels from the root downwards. Each entry is a link to that level; levels without a destination are listed but disabled.
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. An open menu closes when its button disappears.

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.
The ellipsis button is in the tab order, is named "Show n hidden levels", and announces that it opens a menu. Enter or Space opens the menu and focuses its first entry, the arrow keys move between entries, and Escape closes the menu and returns focus to the button.
The menu entries are links, so they can also be opened in a new tab.

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.