Breadcrumbブロック

Breadcrumbコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなナビゲーションブレッドクラムです。モダンなデザインパターン、柔軟なカスタマイズオプション、カスタムナビゲーションアイテムのサポートを備えた完全なブレッドクラムナビゲーションインターフェースを提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-breadcrumb-block

---

📖 使用法

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>
    );
  }

結果

Loading...

高度な使用法

ライブエディター

  function AdvancedBreadcrumb() {
    return (
      <Breadcrumbs>
        {({ defaultBlocks, defaultBlockOrder }) => ({
          blocks: {
            ...defaultBlocks,
            
            // 🏠 プロパティオーバーライド付きホームブレッドクラム
            home: {
              ...defaultBlocks.breadcrumbItem,
              props: {
                ...defaultBlocks.breadcrumbItem.props,
                url: "#home",
                children: "🏠 ホーム",
                style: { fontWeight: 'bold' }
              },
            },
            
            // 📱 カスタムスタイリング付きプロダクトブレッドクラム
            products: {
              ...defaultBlocks.breadcrumbItem,
              props: {
                ...defaultBlocks.breadcrumbItem.props,
                url: "#products",
                children: "📱 プロダクト",
                className: "custom-product-link"
              },
            },
            
            // 🔍 カスタムコンポーネント付き完全なブロックオーバーライド
            search: (
              <span style={{ 
                color: '#fff', 
                backgroundColor: '#007bff', 
                padding: '4px 8px', 
                borderRadius: '4px',
                fontSize: '12px'
              }}>
                🔍 検索結果
              </span>
            ),
            
            // 🎨 カスタムシェブロンオーバーライド
            breadcrumbChevron: (
              <span style={{ 
                margin: '0 8px',
                color: '#ffd700',
                fontWeight: 'bold'
              }}>
                →
              </span>
            ),
            
            // 📄 現在のページ（リンクなし）
            currentPage: (
              <span style={{ 
                color: '#ccc',
                fontStyle: 'italic'
              }}>
                現在のページ
              </span>
            ),
          },
          blockOrder: ['home', 'products', 'search', 'currentPage'],
        })}
      </Breadcrumbs>
    );
  }

結果

Loading...

---

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

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

プロパティ	型	デフォルト	説明
className	string	undefined	ブレッドクラムコンテナのスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトブロックをオーバーライドするか、カスタムブレッドクラムアイテムを追加する関数

注意: メインコンポーネントはすべてのHTML nav要素プロパティを継承します。

サブコンポーネント

Breadcrumbコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

Breadcrumbs.BreadcrumbItem

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

注意: このコンポーネントはすべてのHTML a要素プロパティを継承します。

Breadcrumbs.BreadcrumbChevron

このコンポーネントはプロパティを受け取らず、シェブロンセパレーターをレンダリングします。

---

🔧 TypeScriptサポート

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

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';
import {ComponentProps, ReactNode} from 'react';

// メインコンポーネントインターフェース
interface BreadcrumbProps extends Omit<ComponentProps<'nav'>, 'children'> {
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
  className?: string;
}

// BreadcrumbItemインターフェース
interface BreadcrumbItemProps extends Omit<ComponentProps<'a'>, 'children'> {
  url: string;
  children: ReactNode;
}

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

const breadcrumbItems: BreadcrumbItem[] = [
  { key: 'home', url: '#home', label: 'ホーム' },
  { key: 'products', url: '#products', label: 'プロダクト' },
  { key: 'current', url: '#products/laptop', label: 'ラップトップ' },
];

// アンカープロパティ付きの例
function AdvancedBreadcrumb() {
  return (
    <Breadcrumbs>
      {breadcrumbItems.map((item, index) => (
        <>
          <Breadcrumbs.BreadcrumbItem key={item.key} url={item.url}>
            {item.label}
          </Breadcrumbs.BreadcrumbItem>
          {index < breadcrumbItems.length - 1 && <Breadcrumbs.BreadcrumbChevron />}
        </>
      ))}
    </Breadcrumbs>
  );
}

---

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。