ナビゲーションコンポーネント navigation-component

ナビゲーションコンポーネントを使用すれば、グローバル化されたサイト構造を容易にナビゲートできます。

使用方法 usage

ナビゲーションコンポーネントリストには、サイトのユーザーがサイト構造を容易にナビゲートできるように、ページのツリーが一覧表示されます。

ナビゲーションコンポーネントは、サイトのグローバル化されたサイト構造を自動的に検出し、ローカライズされたページに自動的に適応することができます。さらに、シャドウリダイレクトページを使用してメインコンテンツ構造以外の構造を表すことで、任意のサイト構造をサポートできます。

編集ダイアログでは、ナビゲーションルートページおよびナビゲーションの深さをコンテンツ作成者が定義できます。デザインダイアログでは、ナビゲーションルートおよび深さのデフォルト値をテンプレート作成者が定義できます。

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

このドキュメントでは、ナビゲーションコンポーネントの現在のバージョン（2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v2）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

ローカライズされたサイト構造のサポート localized-site-structure

Web サイトは、多くの場合、様々な地域向けに複数の言語で提供されています。通常、ローカライズされた各ページには、ページテンプレートの一部としてナビゲーション要素が含まれます。ナビゲーションコンポーネントは、サイトのあらゆるページのテンプレートに一度配置すれば、グローバル化されたサイト構造に基づいて、ローカライズされた個々のページに自動的に適応できます。

例 example-localization

コンテンツが次のような構造になっているとします。

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

サイト WKND では、ナビゲーションコンポーネントを、ヘッダーの一部としてページテンプレート上に配置するとよいでしょう。テンプレートの一部で、コンポーネントの​ ナビゲーションルート ​を /content/wknd/language-masters/en（そのサイトのマスターコンテンツが開始される場所）に設定できます。また、コンテンツツリー全体をコンポーネントに表示するのではなく、最初の 2 レベルを概要として表示したい場合は、ナビゲーション構造の深さ ​を 2 に設定するとよいでしょう。

ナビゲーションルート ​の値を通じて、ナビゲーションコンポーネントは、/content/wknd/language-masters/en の次からナビゲーションが開始されることを認識し、サイトの構造を（ナビゲーション構造の深さ ​の値で定義されているとおり）2 レベル下まで繰り返すことでナビゲーションオプションを生成できます。

ユーザーが閲覧しているローカライズ済みページによらず、ナビゲーションコンポーネントは、現在のページの場所を認識し、ルートまで戻ってから、対応するページまで進むことで、対応するローカライズ済みページを見つけることができます。

したがって、訪問者が /content/ch/de/experience/arctic-surfing-in-lofoten を閲覧している場合、コンポーネントは、/content/wknd/language-masters/de に基づいてナビゲーション構造を生成する必要があることを認識します。同様に、訪問者が /content/us/en/experience/arctic-surfing-in-lofoten を閲覧している場合、コンポーネントは、/content/wknd/language-masters/en に基づいてナビゲーション構造を生成する必要があることを認識します。

シャドウサイト構造のサポート shadow-structure

場合によっては、実際のサイト構造とは異なるナビゲーションメニューを訪問者向けに作成する必要があります。例えば、プロモーションの場合は、コンテンツリストを並べ替えて、メニュー内の特定のコンテンツを強調表示するかもしれません。シャドウページは他のコンテンツページにリダイレクトするだけですが、これを使用して、ナビゲーションコンポーネントは必要に応じて任意のナビゲーション構造を生成できます。

それには、以下の手順を実行します。

この結果、ナビゲーションコンポーネントは、シャドウサイト構造に基づいてメニューをレンダリングします。コンポーネントによってレンダリングされるリンクは、シャドウページそのものではなく、シャドウページのリダイレクト先となる実際のコンテンツページを指しています。さらに、シャドウページに基づいたナビゲーションの場合でも、コンポーネントには実際のページの名前が表示されると共に、アクティブなページが正しく強調表示されます。ナビゲーションコンポーネントにより、事実上、シャドウページは訪問者に対して完全に透過的になります。

ナビゲーションでのリダイレクト redirects

ページにリダイレクトターゲットがある場合（外部 URL を指しているか別の AEM ページを指しているかに関係なく）、そのターゲットへのリンクを含むナビゲーションコンポーネントは、リダイレクトターゲットの URL を直接示します。

例 redirect-example

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

ナビゲーションコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細 technical-details

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

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

編集ダイアログ edit-dialog

編集ダイアログでは、ナビゲーションのルートページとナビゲーション構造の深さをコンテンツ作成者が定義できます。

「プロパティ」タブ properties-tab

「アクセシビリティ」タブ accessibility-tab

「アクセシビリティ」タブでは、コンポーネントの「ARIA アクセシビリティ」ラベルの値を設定できます。

「スタイル」タブ styles-tab-edit

ナビゲーションコンポーネントでは、AEM スタイルシステムをサポートしています。

ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。

ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。

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

デザインダイアログでは、コンテンツ作成者に表示されるナビゲーションルートページおよびナビゲーションの深さのデフォルト値をテンプレート作成者が設定できます。

「プロパティ」タブ properties-tab-design

「スタイル」タブ styles-tab

ナビゲーションコンポーネントは、AEM スタイルシステムをサポートしています。

Adobe Client Data Layer data-layer

ナビゲーションコンポーネントは、Adobe Client Data Layer をサポートしています。