---
title: "ナビゲーションを追加する"
slug: "add-navigation"
abstract: "ナビゲーションコンポーネントの追加とスタイル"
---
# ナビゲーションを追加する

ウェブサイトのナビゲーションは、マーケティングの観点から直接影響を与える重要な要素です。SXAのナビゲーションレンダリングは、ウェブサイトユーザーにとって有利なナビゲーション設計をサポートします。ナビゲーションレンダリングをページにドラッグすると、ナビゲーションメニューが生成されます。 **コントロールプロパティ** ダイアログでナビゲーションのスタイリングを指定できます。

ページにナビゲーションコンポーネントを追加するには:

1.  ツールボックスを開き、ナビゲーションセクションでナビゲーションレンダリングを見つけてください。
    
2.  レンダリングをクリックしてドラッグし始めると、レンダリングをドロップできるプレースホルダーが青色で点灯します。ナビゲーションレンダリングを希望のプレースホルダーの上に配置し、プレースホルダーが緑色に点灯したら、レンダリングをページ上に置きます。
    
    > !注コントロールプロパティのダイアログボックスで、プレースホルダーとデータソースのプロパティを変更しないでください。これらのプロパティを変更するとレンダリングが消えたり、他の予期せぬ動作を引き起こす可能性があります。
    
3.  スタイリングセクションで、ナビゲーションレンダリング用のバリアント、例えばページタイトルの代わりに字幕を表示するバリアントがあれば、バリアントフィールドで選択できます。そのバリアントは表示されるフィールドとその外観を決定します。
    
4.  **スタイル**欄で、希望するスタイルを選択し、右矢印をクリックしてから**OK**をクリックします。例えば、以下を選べます:
    
    ナビゲーション
    
    概要
    
    ワイヤーフレームモードの例
    
    **メインナビゲーション - 縦方向のドロップダウン**
    
    標準的な垂直ドロップダウンナビゲーション
    
    **メインナビゲーション - ドロップダウン横方向**
    
    子項目を1行にまとめたドロップダウンナビゲーション
    
    **サイドバーナビゲーション**
    
    すべての子項目は縦に表示されています
    
    **サイトマップナビゲーション**
    
    すべての子項目は縦に表示されています
    
    **ビッグ/ファットナビゲーション**
    
    すべての子項目は水平に表示されます
    
    **モバイルナビゲーション**
    
    モバイル向けナビゲーション
    
    > !注もしあなたが独自のカスタマイズテーマを使っていて、そのテーマがナビゲーションクラスのCSS実装を提供していない場合、ナビゲーションスタイルを変更しても影響がないかもしれません。
    
5.  「 **レベル用のカスタムバリアント」** フィールドでは、特定のナビゲーションレベルに合ったカスタム外見を選択できます。
    
6.  **ナビゲーション設定**のセクションで、以下のフィールドを指定できます:
    
    -   **スタートページ** – ホームページとは異なるページでサイトを開きたい場合は、こちらからそのページを選択してください。
    -   **トップナビゲーションレベル** – ナビゲーションが始まるべきレベル(ルートから数えた)をクリックしてください。
    -   **ナビゲーションの下部レベル** – ナビゲーションが終わるべきレベル(ルートから数えた)をクリックしてください。
    -   **ナビゲーションフィルター** – ドロップダウンリストからナビゲーションフィルターをクリックします。
    -   **フラット構造** – このチェックボックスを選択して、すべてのアイテムを同じレベルに表示します。
    -   **ルートページを含める** – このチェックボックスを選択して、ナビゲーションリストにルートページを含めることができます。
7.  キャッシュ **セクションでは** 、ナビゲーションレンダリングのキャッシュ設定を行い、ウェブサイトのパフォーマンス向上に役立ちます:
    
    -   **キャッシュ可能な –** HTMLキャッシュを有効にするために選択してください。レンダリングにビューが1つだけの場合、このチェックボックスだけを選択する必要があります。
    -   **インデックス更新をクリア –** レンダリングがSitecore ContentSearch APIを使用しているかどうかを選択します。
    -   **データによって変化する** – レンダリングのデータソースに基づいてHTMLの別バージョンをキャッシュすることを選択します。
    -   **デバイスごとに変化** – 使用する各デバイスごとに出力のコピーをキャッシュすることを選択します。
    -   **ログインごとに異なる** – ログインユーザーに対してレンダリングの表示が異なるかどうかを選択します。
    -   **パラメータごとに変化** – レンダリングで受け入れられた各パラメータの出力をキャッシュする選択。
    -   **クエリ文字列で変化** – 各ユニークなクエリ文字列パラメータの組み合わせに対して出力をキャッシュする選択をします。
    -   **ユーザーごとに変わる** – レンダリングがユーザー固有の情報を表示するかどうかを選択します。
8.  **パラメータ**セクションでは、このサブレイアウトのインスタンスに渡されるデータを(データソース以外で)カスタマイズできます。**追加パラメータ**フィールドでは、キー値ペアとして追加のプロパティを追加できます。