パンくずリストブロック

Breadcrumbコンポーネントは、React、TypeScript、MUIで構築された、完全にカスタマイズ可能かつアクセシビリティ対応のナビゲーションパンくずリストです。モダンなデザインパターン、柔軟なカスタマイズオプション、自動シェブロンセパレーター、折りたたみ可能なアイテムのサポートを備えた完全なパンくずリストナビゲーションインターフェースを提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-breadcrumb-block@0.2.0

---

📖 使用法

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';

基本的な使用法

ライブエディター

function BasicBreadcrumb() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.BreadcrumbItem url="#home">ホーム</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#products">商品</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#laptop">ラップトップ</Breadcrumbs.BreadcrumbItem>
    </Breadcrumbs>
  );
}

結果

Loading...

折りたたみ付き

ライブエディター

function CollapsibleBreadcrumb() {
  return (
    <Breadcrumbs maxItems={4} itemsBeforeCollapse={1} itemsAfterCollapse={2}>
      <Breadcrumbs.BreadcrumbItem url="#home">ホーム</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#category">カテゴリ</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#subcategory">サブカテゴリ</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#products">商品</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#laptop">ラップトップ</Breadcrumbs.BreadcrumbItem>
    </Breadcrumbs>
  );
}

結果

Loading...

高度なオーバーライド

ライブエディター

function AdvancedBreadcrumb() {
  return (
    <Breadcrumbs>
      {({defaultBlocks}) => ({
        blocks: {
          breadcrumbChevron: defaultBlocks.breadcrumbChevron,
          home: {
            ...defaultBlocks.breadcrumbItem,
            props: {
              ...defaultBlocks.breadcrumbItem.props,
              url: '#home',
              children: '🏠 ホーム',
              style: {fontWeight: 'bold'},
            },
          },
          products: {
            ...defaultBlocks.breadcrumbItem,
            props: {
              ...defaultBlocks.breadcrumbItem.props,
              url: '#products',
              children: '📱 商品',
            },
          },
          search: (
            <span
              style={{
                color: '#666',
                fontStyle: 'italic',
                fontSize: '12px',
              }}
            >
              検索結果
            </span>
          ),
        },
        blockOrder: ['home', 'products', 'search'],
      })}
    </Breadcrumbs>
  );
}

結果

Loading...

---

🔧 プロパティリファレンス

メインコンポーネントプロパティ

プロパティ	型	デフォルト	説明
maxItems	number	8	表示するパンくずリストの最大数。超過した場合、アイテムは省略記号で折りたたまれます
itemsBeforeCollapse	number	1	折りたたまれた省略記号の前に表示するアイテム数
itemsAfterCollapse	number	1	折りたたまれた省略記号の後に表示するアイテム数
children	BlocksOverride | ReactNode	undefined	パンくずリストアイテムまたはデフォルトブロックをオーバーライドする関数
className	string	undefined	追加CSSクラス名
sx	SxProps	undefined	スタイリング用MUIシステムプロパティ

注意: このコンポーネントはMUI Breadcrumbsを拡張しますが、カスタムシェブロンセパレーターシステムを使用します。デフォルトのMUIセパレーターは、組み込みのBreadcrumbChevronコンポーネントを優先してCSSで非表示になっています。

サブコンポーネント

Breadcrumbコンポーネントは、子として使用できるサブコンポーネントを提供します。

Breadcrumbs.BreadcrumbItem

プロパティ	型	デフォルト	説明
url	string	必須	パンくずリストリンクのURL/href
children	ReactNode	-	パンくずリストアイテムテキストとして表示するコンテンツ

注意: このコンポーネントはunderline="hover"およびcolor="inherit"スタイルが適用されたMUI Linkコンポーネントとしてレンダリングされます。

Breadcrumbs.BreadcrumbChevron

SVG矢印としてレンダリングされるシェブロンアイコンセパレーター。シェブロンはテーマのprimary.contrastTextカラーを継承します。

• コンパウンドコンポーネント: 各BreadcrumbItemの間に手動で追加する必要があります
• ブロックオーバーライドパターン: アイテム間に自動的に挿入されます

カスタムセパレーター

ブロックオーバーライドパターンでセパレーターをカスタマイズするには、blocksオブジェクトに独自のbreadcrumbChevronを提供します。

---

🎨 設定例

コンポーネントはデフォルトで以下のスタイルを持つNodeblocksテーマを使用します：

• 背景: theme.palette.primary.mainを使用
• テキストカラー: theme.palette.primary.contrastTextを使用
• タイポグラフィ: パンくずリストアイテムはtheme.typography.captionを継承
• シェブロン: theme.palette.primary.contrastTextカラーを使用

sxプロップでのカスタムスタイリング

<Breadcrumbs
  sx={{
    padding: 2,
    backgroundColor: 'grey.100',
    borderRadius: 1,
  }}
>
  <Breadcrumbs.BreadcrumbItem url="#home">ホーム</Breadcrumbs.BreadcrumbItem>
  <Breadcrumbs.BreadcrumbChevron />
  <Breadcrumbs.BreadcrumbItem url="#page">ページ</Breadcrumbs.BreadcrumbItem>
</Breadcrumbs>

---

🔧 TypeScriptサポート

包括的な型定義による完全なTypeScriptサポート：

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';
import React, {ReactNode} from 'react';
import {BreadcrumbsProps} from '@mui/material';

// メインコンポーネントインターフェース
interface BreadcrumbProps extends Omit<BreadcrumbsProps, 'children'> {
  children?: BlocksOverride<DefaultBlocks, CustomBlocks> | ReactNode;
  maxItems?: number;
  itemsBeforeCollapse?: number;
  itemsAfterCollapse?: number;
}

// BreadcrumbItemインターフェース
interface BreadcrumbItemProps {
  url: string;
  children?: ReactNode;
}

// 使用例（データ構造付き）
interface BreadcrumbData {
  key: string;
  url: string;
  label: string;
}

// データからの動的パンくずリスト生成
function DynamicBreadcrumb() {
  const breadcrumbItems: BreadcrumbData[] = [
    {key: 'home', url: '/home', label: 'ホーム'},
    {key: 'products', url: '/products', label: '商品'},
    {key: 'current', url: '/products/laptop', label: 'ラップトップ'},
  ];

  return (
    <Breadcrumbs>
      {breadcrumbItems.map((item, index) => (
        <React.Fragment key={item.key}>
          {index > 0 && <Breadcrumbs.BreadcrumbChevron />}
          <Breadcrumbs.BreadcrumbItem url={item.url}>{item.label}</Breadcrumbs.BreadcrumbItem>
        </React.Fragment>
      ))}
    </Breadcrumbs>
  );
}

---

📝 注意事項

• このコンポーネントはMUI Breadcrumbsを拡張しますが、カスタムシェブロンセパレーターシステムを使用します
• デフォルトのMUIセパレーターは、組み込みのBreadcrumbChevronコンポーネントを優先してCSSで非表示になっています
• パンくずリストアイテムはtheme.typography.captionからタイポグラフィを継承します
• ブロックオーバーライドパターンを使用する場合、シェブロンはアイテム間に自動的に挿入されます
• maxItems、itemsBeforeCollapse、itemsAfterCollapseプロパティで折りたたみ動作を制御します
• BreadcrumbItemはunderline="hover"およびcolor="inherit"スタイルを持つMUI Linkコンポーネントとしてレンダリングされます
• デフォルトスタイリングにはプライマリ背景色とコントラストテキストカラーが含まれます

---

React、TypeScript、MUIを使用して❤️で構築されました。