Skip to content
LuoForge/Tungsten
Components/Breadcrumb·Experimental

Breadcrumb

since v12.1.0

Breadcrumb — config-driven IA wayfinding. The last item is always the current

page (non-link, aria-current="page"); earlier items with an href are links.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { Breadcrumb } from '@hey-mike/tungsten';
import { Breadcrumb } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/breadcrumb/page.tsx

import { Breadcrumb } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function BreadcrumbSnapshot() {
  return (
    <VariantGrid
      title="Breadcrumb"
      variants={[
        {
          label: 'default',
          node: (
            <Breadcrumb
              items={[
                { label: 'Home', href: '#' },
                { label: 'Users', href: '#' },
                { label: 'Amara Reyes' },
              ]}
            />
          ),
        },
      ]}
    />
  );
}

import { Breadcrumb } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function BreadcrumbSnapshot() {
  return (
    <VariantGrid
      title="Breadcrumb"
      variants={[
        {
          label: 'default',
          node: (
            <Breadcrumb
              items={[
                { label: 'Home', href: '#' },
                { label: 'Users', href: '#' },
                { label: 'Amara Reyes' },
              ]}
            />
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <Breadcrumb />.

PropTypeDefaultDescription
items*BreadcrumbItem[]——
labelstringBreadcrumbAccessible label for the nav landmark. @defaultValue 'Breadcrumb'
separatorReactNode/Separator between crumbs. @defaultValue '/'

Source