Breadcrumb

Storybook GitHub

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

<template>
  <mt-breadcrumb>
    <mt-breadcrumb-link to="#">Home</mt-breadcrumb-link>
    <mt-breadcrumb-separator />
    <mt-breadcrumb-link to="#">Products</mt-breadcrumb-link>
    <mt-breadcrumb-separator />
    <mt-breadcrumb-item current>Shoes</mt-breadcrumb-item>
  </mt-breadcrumb>
</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,
  MtBreadcrumbItem,
  MtBreadcrumbLink,
  MtBreadcrumbSeparator,
} from "@shopware-ag/meteor-component-library";

Links render as a router-link by default, so pass the destination through the to prop. Set as="a" to render a plain anchor instead.

Examples

Sizes

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

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <mt-breadcrumb size="xs">
      <mt-breadcrumb-link to="#">Home</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Products</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-item current>Shoes</mt-breadcrumb-item>
    </mt-breadcrumb>

    <mt-breadcrumb size="s">
      <mt-breadcrumb-link to="#">Home</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Products</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-item current>Shoes</mt-breadcrumb-item>
    </mt-breadcrumb>
  </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";
import MtBreadcrumbItem from "@shopware-ag/meteor-component-library/MtBreadcrumbItem";
import MtBreadcrumbLink from "@shopware-ag/meteor-component-library/MtBreadcrumbLink";
import MtBreadcrumbSeparator from "@shopware-ag/meteor-component-library/MtBreadcrumbSeparator";
</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>
      <mt-breadcrumb-link to="#">Home</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#"
        >Clothing and accessories for every season of the
        year</mt-breadcrumb-link
      >
      <mt-breadcrumb-separator />
      <mt-breadcrumb-item current>Shoes</mt-breadcrumb-item>
    </mt-breadcrumb>
  </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";
import MtBreadcrumbItem from "@shopware-ag/meteor-component-library/MtBreadcrumbItem";
import MtBreadcrumbLink from "@shopware-ag/meteor-component-library/MtBreadcrumbLink";
import MtBreadcrumbSeparator from "@shopware-ag/meteor-component-library/MtBreadcrumbSeparator";
</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>
      <mt-breadcrumb-link to="#">Home</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Catalog</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Clothing and accessories for every season</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Shoes</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Sneakers</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-item current>Running shoes</mt-breadcrumb-item>
    </mt-breadcrumb>
  </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";
import MtBreadcrumbItem from "@shopware-ag/meteor-component-library/MtBreadcrumbItem";
import MtBreadcrumbLink from "@shopware-ag/meteor-component-library/MtBreadcrumbLink";
import MtBreadcrumbSeparator from "@shopware-ag/meteor-component-library/MtBreadcrumbSeparator";
</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 overflow="wrap">
      <mt-breadcrumb-link to="#">Home</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Catalog</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Clothing and accessories for every season</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Shoes</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-link to="#">Sneakers</mt-breadcrumb-link>
      <mt-breadcrumb-separator />
      <mt-breadcrumb-item current>Running shoes</mt-breadcrumb-item>
    </mt-breadcrumb>
  </div>
</template>

From the current route

Build the trail from the route segments with v-for and mark the last segment as the current page. useRoute comes from vue-router.

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

const route = useRoute();

const crumbs = 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>
    <template v-for="(crumb, index) in crumbs" :key="crumb.to">
      <mt-breadcrumb-item v-if="index === crumbs.length - 1" current>
        {{ crumb.label }}
      </mt-breadcrumb-item>
      <mt-breadcrumb-link v-else :to="crumb.to">{{ crumb.label }}</mt-breadcrumb-link>
      <mt-breadcrumb-separator v-if="index < crumbs.length - 1" />
    </template>
  </mt-breadcrumb>
</template>

Anatomy

Breadcrumb consists of four companion exports that are used together:

mt-breadcrumb renders the navigation landmark and the ordered list. It controls the size and handles collapsing.
mt-breadcrumb-link renders a clickable level. It looks like plain text and is underlined on hover.
mt-breadcrumb-item renders a level without a destination, usually the current page.
mt-breadcrumb-separator renders the slash between two levels and is hidden from assistive technology.

API reference

MtBreadcrumb

Props

Prop	Type	Default
`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`

Slots

Slot	Bindings
`default`	`{}`

MtBreadcrumbLink

Props

Prop	Type	Default
`to` The destination of the crumb. Passed to the rendered element as `to` for a `router-link` and as `href` for a plain anchor.	`string \| Record<string, unknown>`	`undefined`
`as` The element or component that renders the crumb.	`string`	`"router-link"`

Events

Event	Payload
`click`	`[event: MouseEvent]`

Slots

Slot	Bindings
`default`	`{}`

MtBreadcrumbItem

Props

Prop	Type	Default
`current` Marks the crumb as the current page. It is announced with `aria-current="page"`, rendered bold, and stays visible when the breadcrumb collapses.	`false \| true`	`false`

Slots

Slot	Bindings
`default`	`{}`

MtBreadcrumbSeparator

Best practices

Keep labels short and use the same names as in the navigation and page titles.
End the trail with the current page and mark it with current.
Place exactly one separator between two levels.

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 turn the current page into a link.

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.
Use only the four parts as direct children, optionally wrapped in a <template v-for>. The last child represents the current page.
Breadcrumb observes its own width and reacts immediately when the container, the viewport, or a label changes.
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. Labels are never 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 crumb marked with current 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.

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.