ナビゲーションの追加

概要

ナビゲーション コンポーネントの追加とスタイルの設定

Web サイトのナビゲーションは、マーケティングの観点から直接影響を与える重要なコンポーネントです。SXA のナビゲーション レンダリングは、Web サイト ユーザーを支援する方法でナビゲーションをデザインするのに役立ちます。ナビゲーション レンダリングをページにドラッグすると、ナビゲーション メニューが生成されます。[コントロールのプロパティ] ダイアログでは、ナビゲーションのスタイルを指定できます。

ページにナビゲーション コンポーネントを追加するには、次の手順に従います。

  1. ツールボックスを開き、ナビゲーション セクションで、ナビゲーション レンダリングを見つけます。

  2. クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。ナビゲーション レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが緑色に点灯したら、レンダリングをページにドロップします。

    注記

    [コントロールのプロパティ] ダイアログ ボックスで、プレースホルダー プロパティやデータ ソース プロパティを変更しないでください。これらのプロパティを変更すると、レンダリングが消えたり、その他の予期しない動作が発生する可能性があります。

  3. スタイル セクションで、ナビゲーション レンダリングに使用できるバリアント (ページ タイトルの代わりにサブタイトルを表示するものなど) がある場合は、[バリアント] フィールドでそれを選択できます。バリアントによって、表示されるフィールドとそのアピアランスが決まります。

  4. [スタイル] フィールドで目的のスタイルを選択し、右矢印をクリックしてから [OK] をクリックします。たとえば、次を選択できます。

    ナビゲーション

    説明

    ワイヤーフレーム モードの例

    [メイン ナビゲーション - ドロップ ダウン (縦)]

    標準の縦ドロップダウン ナビゲーション

    メイン ナビゲーション ドロップダウン (縦) の例。

    [メイン ナビゲーション - ドロップダウン (横)]

    子アイテムを 1 行で表示するドロップダウン ナビゲーション

    メイン ナビゲーション ドロップダウン (横) の例。

    [サイドバー ナビゲーション]

    すべての子アイテムを縦に表示

    サイドバー ナビゲーションの例。

    [サイトマップ ナビゲーション]

    すべての子アイテムを縦に表示

    サイトマップ ナビゲーションの例。

    [ビッグ/ファット ナビゲーション]

    すべての子アイテムを横に表示

    ビッグ/ファットナビゲーションの例。

    [モバイル ナビゲーション]

    モバイル用ナビゲーション

    モバイル用ナビゲーションの例。

    注記

    独自にカスタマイズしたテーマを使用していて、そのテーマがナビゲーション クラスの CSS 実装を提供しない場合、ナビゲーションのスタイルを変更しても効果がない可能性があります。

  5. [レベルのカスタム バリアント] フィールドでは、ナビゲーションの特定レベルのカスタム アピアランスを選択できます。

  6. [ナビゲーション設定] セクションでは、次のフィールドを指定できます。

    • [スタート ページ] – サイトをホーム ページとは別のページで開く場合は、ここでそのページを選択します。

    • [トップ ナビゲーション レベル] – ナビゲーションを開始するレベル (ルートからカウント) をクリックします。

    • [ボトム ナビゲーション レベル] – ナビゲーションを終了するレベル (ルートからカウント) をクリックします。

    • [ナビゲーション フィルター] – ドロップダウン リストのナビゲーション フィルターをクリックします。

    • [フラット構造] – このチェックボックスをオンにすると、すべてのアイテムが同じレベルに表示されます。

    • [ルート ページを含む] – ナビゲーション リストにルート ページを含めるには、このチェックボックスをオンにします。

  7. [キャッシュ] セクションで、Web サイトのパフォーマンスを向上させるために、以下のナビゲーション レンダリングのキャッシュを設定できます。

    • [キャッシュ可能] - HTML キャッシュを有効にする場合に選択します。レンダリングにビューが 1 つしかない場合は、オンにする必要があるチェック ボックスはこれだけです。

    • [インデックス更新時にクリア] – レンダリングで Sitecore ContentSearch API を使用するかどうかを選択します。

    • [データによって異なる] - レンダリングのデータ ソースに基づいて、HTML の別のバージョンをキャッシュする場合に選択します。

    • [デバイスによって異なる] - 使用するデバイスごとに出力のコピーをキャッシュする場合に選択します。

    • [ログインによって異なる] - ログインしたユーザーによって異なるレンダリングを表示する場合に選択します。

    • [パラメーターによって異なる] – レンダリングで受け入れられるパラメーターの出力をキャッシュする場合に選択します。

    • [クエリによって異なる] - クエリ文字列パラメーターの一意の組み合わせごとに出力をキャッシュする場合に選択します。

    • [ユーザーによって異なる] – レンダリングでユーザー固有の情報を表示する場合に選択します。

  8. [パラメーター] セクションでは、サブレイアウトのこのインスタンス (データ ソースを越えて) に渡されるデータをカスタマイズできます。[追加パラメーター] フィールドで、追加のプロパティをキーと値のペアとして追加します。