Breadcrumb

Playground

'use client';
import { Breadcrumb, BreadcrumbItem } from '@mbsw/ui';

export default function Demo() {
  return (
    <Breadcrumb aria-label={"Current location"}>
      <BreadcrumbItem
        label={"Documents"}
        href={"/en/getting-started/installation/"}
        target="_top"
      />
      <BreadcrumbItem
        label="Components"
        href={"/en/components/"}
        target="_top"
      />
      <BreadcrumbItem label="Button" current />
    </Breadcrumb>
  );
}

Usage

Mark the current page with current. Breadcrumb adds separators automatically. Link earlier locations with href or an asChild link.

'use client';
import { Breadcrumb, BreadcrumbItem } from '@mbsw/ui';

export default function Example() {
  return (
    <Breadcrumb aria-label={"Current location"}>
      <BreadcrumbItem
        label={"Documents"}
        href="/getting-started/installation/"
      />
      <BreadcrumbItem label="Components" href="/components/" />
      <BreadcrumbItem label="Button" current />
    </Breadcrumb>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

BreadcrumbBreadcrumbItemBreadcrumbSeparator