メインコンテンツまでスキップ

パンくずリストブロック

Breadcrumbs は、MUI Breadcrumbs をベースにしたナビゲーションのパンくずリストで、プライマリーバー風のスタイルと chevron 区切りを備えています。

インストール​

npm install @nodeblocks/frontend-breadcrumb-block

必要なもの​

項目理由
items (optional){ label, url? } 形式のセグメントからパンくずを描画します（デフォルトのパターン）
Breadcrumbs.Item (optional)items の代わりにコンパウンド子要素でパンくずを構成します
onNavigate (optional)クライアントサイドルーティング用に、クリックされたセグメントの href とともに呼び出されます
children (function, optional)defaultBlocks と blockOrder を上書きします
構成モード

最も簡単なパンくずには items prop を使ってください（クイックスタートを参照）。セグメントごとに完全な制御が必要な場合は Breadcrumbs.Item のコンパウンド子要素を使ってください。children が JSX 要素（関数ではない）である場合、items prop は無視されます。defaultBlocks と blockOrder を使う 関数 child を使えば、カスタムキー、順序、リンクではないノードを設定できます。blockOrder ブロックより 前に これらのセグメントを描画したい場合を除き、items は省略してください。MUI は子要素の間に区切り記号を挿入するため、手動で chevron 要素を追加しないでください。

コード例​

ライブエディター
function Example() {
  const [lastEvent, setLastEvent] = React.useState('Ready');

  return (
    <>
      <Breadcrumbs
        items={[
          { label: 'Home', url: '#home' },
          { label: 'Products', url: '#products' },
          { label: 'Shoes' },
        ]}
        onNavigate={(url) => {
          setLastEvent(`Navigate: ${url}`);
        }}
      />
      <div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>{lastEvent}</div>
    </>
  );
}
結果
Loading...

重要なプロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
itemsreadonly { label: ReactNode; url?: string; onClick?: React.MouseEventHandler<HTMLAnchorElement> }[]いいえundefinedパンくずのセグメント。現在のページでは url を省略し、項目ごとの onClick を任意で指定できます
onNavigate(url: string) => voidいいえundefinedhref / url を持つセグメントがクリックされたときに呼び出されます（ある場合はそのセグメントの onClick の後に実行されます）
maxItemsnumberいいえ8MUI がパンくずを折りたたむ前の最大表示項目数
itemsBeforeCollapsenumberいいえ1折りたたみの省略記号の前に表示する項目数
itemsAfterCollapsenumberいいえ1折りたたみの省略記号の後に表示する項目数

コンテンツプロパティ​

コンポーネントプロパティ型必須デフォルト説明
Itemhrefstringいいえundefinedリンク先。現在の（リンクではない）セグメントでは省略します
ItemchildrenReactNodeはい-セグメントのラベル
ItemcomponentReact.ElementTypeいいえ'a'リンクのルート要素
ItemonClickReact.MouseEventHandler<HTMLAnchorElement>いいえundefinedクリックハンドラ。href が文字列の場合は onNavigate も実行されます
Breadcrumbs (root)separatorReactNodeいいえMUI ChevronRight アイコンセグメント間の区切り記号

レイアウトと構成のプロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefinedBreadcrumbs.Item 要素、または blocks と blockOrder を返す関数オーバーライド
classNamestringいいえundefinedルートコンテナのクラス名（デフォルトで nbb-breadcrumb が適用されます）
sxSxPropsいいえundefinedルートコンテナ用の MUI システムスタイル

Breadcrumbs は MUI の BreadcrumbsProps（children を除く）を継承し、expandText と slotProps を含みます。オーバーライドなしのデフォルト blockOrder は ['item']（defaultBlockOrder）です。

デフォルト UI ブロック​

ブロック基盤備考
Breadcrumbs (root)Breadcrumbsプライマリーバー（bgcolor: primary.main）。separator のデフォルトは ChevronRight
Breadcrumbs.ItemLinkセグメントリンク（nbb-breadcrumb-item）。href を使い、設定されている場合は onNavigate を呼び出します

TypeScript​

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

// Same shape as the package's BreadcrumbNavItem (not re-exported from the entry point).
type TrailItem = {
  label: ReactNode;
  url?: string;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
};

const trail: TrailItem[] = [
  { label: 'Home', url: '/home' },
  { label: 'Products', url: '/products' },
  { label: 'Shoes' },
];

<Breadcrumbs items={trail} onNavigate={(url) => router.push(url)} />;