パンくずリスト(Breadcrumb)

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、Breadcrumbプリミティブ コンポーネントの解剖学、APIリファレンス、およびバリエーションについて説明します。

解剖学

RequestResponse
import { Breadcrumb } from '@sitecore-search/ui';

const MyBreadcrumbComponent = () => (
    <Breadcrumb.Root>
        <Breadcrumb.Navigation>
            <Breadcrumb.List>
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">
                        Item 1
                    </Breadcrumb.Link>
                    <Breadcrumb.Separator value="/"></Breadcrumb.Separator>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <Breadcrumb.Link aria-current='page' href="#">
                        Item 2
                    </Breadcrumb.Link>
                </Breadcrumb.Item>
            </Breadcrumb.List>
        <Breadcrumb.Navigation>
    </Breadcrumb.Root>
);

コンポーネントの使用

次のタブでは、Breadcrumbプリミティブコンポーネントの使用について説明します。

プレーンコンポーネント

Screenshot of a plain Breadcrumb primitive component.
RequestResponse
() => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Navigation>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#" onClick={(e) => e.preventDefault()}>
              Item 1
            </Breadcrumb.Link>
            <Breadcrumb.Separator></Breadcrumb.Separator>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#" onClick={(e) => e.preventDefault()}>
              Item 2
            </Breadcrumb.Link>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Navigation>
    </Breadcrumb.Root>
  );
}

APIリファレンス

パンくずリスト.ルート

Breadcrumb.Rootコンポーネントには、すべてのパンくずリストが含まれています。

子供：Breadcrumb.Navigation

名前

形容

article

articleオブジェクト

パンくずリスト.ナビゲーション

Breadcrumb.Navigationコンポーネントは、navHTML要素を表します。Breadcrumbとラベル付けされたnavエレメントは、構造物をパンくずリストとして識別し、ナビゲーションのランドマークにして、見つけやすくします。  

親： Breadcrumb.Root

子供：Breadcrumb.List

パンくずリスト(Breadcrumb.List)

Breadcrumb.List コンポーネントはol(順序付きリスト) HTML要素です。

親：Breadcrumb.Root

子供：Breadcrumb.Item

パンくずリスト.アイテム

Breadcrumb.Itemコンポーネントは、リンクとセパレータを使用してアイテムのコンテンツをリストします。

親：Breadcrumb.List

子供:Breadcrumb.LinkとBreadcrumb.Separator。

Breadcrumb.Link

Breadcrumb.Linkコンポーネントはアンカー HTML要素です。

親：Breadcrumb.Item

ブレッドクラム.セパレーター

Breadcrumb.Separatorコンポーネントは、パンくずリスト項目を分離します。デフォルトでは空の要素です。セパレーターは、パンくずリストを示す視覚的なプレゼンテーションの一部であり、Breadcrumbのラベルを持つnav要素によって既に意味的に表されています。そのため、スクリーン リーダーで使用されるアクセシビリティ ツリーで表されていない表示手法を使用すると、冗長で気を散らす可能性のある詳細を回避できます。

親： Breadcrumb.Item

名前

形容

value

セパレータの文字列値。

APIリファレンス

パンくずリスト.ルート

Breadcrumb.Rootコンポーネントには、すべてのパンくずリストが含まれています。

子: Breadcrumb.Navigation

パンくずリスト.ナビゲーション

Breadcrumb.Navigationコンポーネントは、nav HTML要素を表します。Breadcrumbというラベルの付いたナビゲーション要素は、構造物をパンくずリストとして識別し、ナビゲーションのランドマークにして、見つけやすくします。

親: Breadcrumb.Root

子: Breadcrumb.List

パンくずリスト(Breadcrumb.List)

Breadcrumb.Listコンポーネントは、ol(順序付きリスト) HTML要素です。

親: Breadcrumb.Root

子供: Breadcrumb.Item

パンくずリスト.アイテム

Breadcrumb.Itemコンポーネントは、リンクとセパレータを使用してアイテムのコンテンツを一覧表示します。

親: Breadcrumb.List

子: Breadcrumb.Link、Breadcrumb.Separator

Breadcrumb.Link

Breadcrumb.Linkコンポーネントはアンカー HTML要素です。

親: Breadcrumb.Item

ブレッドクラム.セパレーター

Breadcrumb.Separatorコンポーネントは、パンくずリスト項目を分離します。デフォルトでは空の要素です。セパレーターは、パンくずリストを示す視覚的なプレゼンテーションの一部であり、パンくずリストのラベルを持つnav要素によって既に意味的に表されています。そのため、スクリーン リーダーで使用されるアクセシビリティ ツリーで表されていない表示手法を使用すると、冗長で気を散らす可能性のある詳細を回避できます。

親: Breadcrumb.Item

名前

形容

価値

セパレータの値。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、