パンくずコンポーネント（v1） breadcrumb-component-v

コアコンポーネントのパンくずコンポーネントはナビゲーションコンポーネントです。コンテンツ階層におけるページの場所に基づいてリンクのパンくずリストを作成します。

使用方法 usage

パンくずコンポーネントには、サイト階層における現在のページの位置が表示され、ページの訪問者は現在の場所からページ階層内を移動することができます。多くの場合、パンくずコンポーネントはページヘッダーやフッターに統合されています。

デフォルトのナビゲーションレベルや、現在のページまたは非表示のページを表示する機能などの使用可能なオプションは、テンプレート作成者がデザインダイアログで定義できます。次に、非表示のページを表示するかどうかやコンポーネントの実際のナビゲーションレベルをコンテンツ編集者が編集ダイアログで選択できます。

バージョンと互換性 version-and-compatibility

このドキュメントでは、AEM 6.3 に付属しているコアコンポーネントのリリース 1.0.0 で最初に導入されたパンくずコンポーネント v1 について説明します。

パンくずコンポーネント v1 の互換性を次の表に示します。

コンポーネント出力のサンプル sample-component-output

以下は We.Retail から取得したサンプルです。

スクリーンショット screenshot

HTML html

<div class="cmp cmp-breadcrumb aem-GridColumn aem-GridColumn--default--12">

<ol class="breadcrumb">
    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us.html">
            United States
        </a>
    </li>

    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us/en.html">
            English
        </a>
    </li>

    <li class="breadcrumb-item active">

            Experience

    </li>
</ol>

</div>

JSON json

"breadcrumb": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/breadcrumb"
            }

編集ダイアログ edit-dialog

編集ダイアログでは、コンテンツ作成者がパンくずリスト内の非表示ページとアクティブなページ、および表示する階層の深さを無効化できます。

デザインダイアログ design-dialog

デザインダイアログでは、テンプレート作成者が、パンくずリスト内の非表示ページとアクティブページおよび表示する階層の深さを無効化するオプションのデフォルト値を定義できます。

技術的詳細 technical-details

パンくずコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントプロジェクト全体を GitHub からダウンロードできます。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。