Shared/Breadcrumbs

Category Page

label

Component Source

bread-crumbs.tsx

import { Link } from './link';
import { formatPageTitle } from '@/lib/utils/format-utils';
import type { Locale } from '@/lib/i18n/types';

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbsProps {
  items: BreadcrumbItem[] | BreadcrumbItem[][];
  locale?: Locale;
}

/**
 * Type guard to check if items is an array of arrays (multiple trails)
 */
function isMultipleTrailsArray(
  items: BreadcrumbItem[] | BreadcrumbItem[][],
): items is BreadcrumbItem[][] {
  return items.length > 0 && Array.isArray(items[0]);
}

/**
 * Single breadcrumb trail (ol element)
 */
function BreadcrumbTrail({ items, locale = 'ja' }: { items: BreadcrumbItem[]; locale?: Locale }) {
  const isEn = locale === 'en';
  const homeLabel = isEn ? 'Home' : 'トップ';
  const homeHref = isEn ? '/en/' : '/';
  // Mobile breadcrumb: show direct parent (second-to-last item) or home
  const directParent =
    items.length >= 2 ? items[items.length - 2] : { label: homeLabel, href: homeHref };

  return (
    <ol className="flex gap-x-hgap-xs gap-y-vgap-sm flex-wrap">
      {/* Home link - mobile only with back arrow (shows direct parent) */}
      <li className="items-center whitespace-nowrap flex md:hidden">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          className="h-[20px] mr-[3px] text-zd-gray"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
        </svg>
        <Link className="zd-invert-color-link" to={directParent.href ?? '/'}>
          {directParent.label}
        </Link>
      </li>

      {/* Home link - desktop */}
      <li className="items-center whitespace-nowrap hidden md:flex">
        <Link className="zd-invert-color-link" to={homeHref}>
          {homeLabel}
        </Link>
      </li>

      {/* Breadcrumb items */}
      {items.map((item, index) => {
        const isLast = index === items.length - 1;
        // Improved key generation to avoid collisions
        const key = `${index}-${item.label}-${item.href ?? 'current'}`;

        return (
          <li key={key} className="items-center whitespace-nowrap hidden md:flex">
            {/* Forward arrow separator */}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              className="h-[20px] mr-[.4em] text-zd-gray"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>

            {/* Link or text */}
            {item.href && !isLast ? (
              <Link className="zd-invert-color-link" to={item.href}>
                {item.label}
              </Link>
            ) : (
              <span aria-current={isLast ? 'page' : undefined}>
                {isLast ? formatPageTitle(item.label) : item.label}
              </span>
            )}
          </li>
        );
      })}
    </ol>
  );
}

/**
 * Breadcrumb navigation component
 * Supports multiple breadcrumb trails (Gatsby-style)
 *
 * @example Single trail
 * <Breadcrumbs items={[{ label: "Article" }]} />
 *
 * @example Multiple trails (brand + article)
 * <Breadcrumbs items={[
 *   [{ label: "Brands", href: "/brands/" }, { label: "ADDAC" }],
 *   [{ label: "Articles", href: "/notes/" }, { label: "ADDAC511" }]
 * ]} />
 */
export function Breadcrumbs({ items, locale = 'ja' }: BreadcrumbsProps) {
  return (
    <nav
      className="pb-vgap-md -mt-vgap-xs text-xs md:text-sm lg:text-base gap-vgap-xs grid"
      aria-label="Breadcrumb"
    >
      {isMultipleTrailsArray(items) ? (
        // Multiple breadcrumb trails
        items.map((trail, index) => (
          <BreadcrumbTrail key={`trail-${index}`} items={trail} locale={locale} />
        ))
      ) : (
        // Single breadcrumb trail
        <BreadcrumbTrail items={items} locale={locale} />
      )}
    </nav>
  );
}

Story Source

import { Breadcrumbs } from './bread-crumbs';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';

/**
 * Breadcrumbs Component
 *
 * Navigation component showing the current page's location in the site hierarchy.
 * Features:
 * - Single or multiple breadcrumb trails
 * - Mobile-optimized view (shows direct parent with back arrow)
 * - Desktop full trail view
 * - Support for current page indication
 */
export const meta = {
  title: 'Shared/Breadcrumbs',
};

export const controls: ControlsMap = {
  label: { type: 'text', default: '記事タイトル' },
};

/**
 * Default - Single trail with current page
 */
export const Default = {
  args: { label: '記事タイトル' },
  render: ({ label }: { label: string }) => <Breadcrumbs items={[{ label }]} />,
};

/**
 * Multiple levels - Article in category
 */
export const MultipleLevels = () => (
  <Breadcrumbs
    items={[{ label: '記事一覧', href: '/notes/' }, { label: 'モジュラーシンセ入門ガイド' }]}
  />
);

/**
 * Three levels - Product in brand
 */
export const ThreeLevels = () => (
  <Breadcrumbs
    items={[
      { label: 'ブランド', href: '/brands/' },
      { label: 'Mutable Instruments', href: '/brands/mutable-instruments/' },
      { label: 'Plaits' },
    ]}
  />
);

/**
 * Multiple trails - Brand and Article paths
 */
export const MultipleTrails = () => (
  <Breadcrumbs
    items={[
      [
        { label: 'ブランド', href: '/brands/' },
        { label: 'ADDAC System', href: '/brands/addac/' },
      ],
      [{ label: '記事一覧', href: '/notes/' }, { label: 'ADDAC511 商品詳細' }],
    ]}
  />
);

/**
 * Category and tag page example
 */
export const CategoryPage = () => (
  <Breadcrumbs items={[{ label: 'カテゴリ', href: '/category/' }, { label: 'ガイド' }]} />
);

/**
 * Long label text
 */
export const LongLabel = () => (
  <Breadcrumbs
    items={[
      { label: '記事一覧', href: '/notes/' },
      {
        label: 'モジュラーシンセサイザーの基本的な使い方とパッチングテクニック入門ガイド',
      },
    ]}
  />
);