---
title: "ナビゲーションコンポーネントの追加"
slug: "add-a-navigation-component"
abstract: "ページにナビゲーションコンポーネントを追加・スタイリングする"
---
# ナビゲーションコンポーネントの追加

> !注このトピックで説明されている手順はエクスペリエンスエディターを使用してください。

ナビゲーションコンポーネントは、ウェブサイトのユーザーにとって有利なナビゲーション設計をサポートします。ナビゲーションコンポーネントをページにドラッグすると、ナビゲーションメニューが生成されます。 **コントロールプロパティ** ダイアログでナビゲーションのスタイリングを指定できます。

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

1.  ツールボックスを開けろ。
    
2.  **ナビゲーション**セクションから、そのコンポーネントを追加したいプレースホルダーに**ナビゲーションコンポーネントを**ドラッグ&ドロップします。
    
    > !注コントロールプロパティのダイアログボックスでは、プレースホルダーとデータソースのプロパティを変更しないでください。これらのプロパティを変更すると、コンポーネントが消えたり、他の予期せぬ動作を引き起こす可能性があります。
    
3.  例えば、ページタイトルの代わりに字幕を表示するバリアントを選択するには、浮動ツールバーの **バリアント** リストで、希望するバリアントを選択します。バリアントは表示されるフィールドとその外観を決定します。
    
    ![The toolbar of the Navigation component](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/SXA-headless-floating-toolbar-navigation.png)
    
4.  ナビゲーションメニューにスタイルを適用するには、「 **コンポーネントのスタイルと動作を編集**」をクリックしてください。
    
5.  ダイアログボックスで、希望するスタイルを選択し、**OK**をクリックします。例えば、以下を選べます:
    
    ナビゲーション
    
    概要
    
    ワイヤーフレームモードの例
    
    **メインナビゲーション - 縦方向のドロップダウン**
    
    標準的な垂直ドロップダウンナビゲーション
    
    **メインナビゲーション - ドロップダウン横方向**
    
    子項目を1行にまとめたドロップダウンナビゲーション
    
    **サイドバーナビゲーション**
    
    すべての子項目は縦に表示されています
    
    **サイトマップナビゲーション**
    
    すべての子項目は縦に表示されています
    
    **ビッグ/ファットナビゲーション**
    
    すべての子項目は水平に表示されます
    
    **モバイルナビゲーション**
    
    モバイル向けナビゲーション
    
6.  **「デザイン**\>**高度なスタイリング**」セクションでは、以下のフィールドを指定できます:
    
    -   **スタートページ** – ホームページとは異なるページでサイトを開きたい場合は、こちらからそのページを選択してください。
    -   **ナビゲーションのトップレベル** – ナビゲーションが始まるべきレベル(ルートから数えた)をクリックしてください。
    -   **ナビゲーションの下部レベル** – ナビゲーションが終了すべきレベル(ルートから数えた)をクリックしてください。
    -   **ナビゲーションフィルター** – リストからナビゲーションフィルターをクリックしてください。
    -   **フラットな構造** – このチェックボックスを選択して、すべてのアイテムを同じレベルに表示します。
    -   **ルートページを含める** – このチェックボックスを選択して、ナビゲーションリストにルートページを含めることができます。
7.  キャッシュ **セクションでは** 、ナビゲーションコンポーネントのキャッシュ設定を行い、ウェブサイトのパフォーマンス向上に役立ちます:
    
    -   **公開時のクリア** - 公開するたびにコンポーネントのキャッシュをクリアします。
        
    -   **コンテンツ更新時のクリア** - 関連するコンテンツが変更された際にコンポーネントのキャッシュをクリアします。
        
        > !注この設定の挙動は、cacheHTMLやenablePartialHtmlCacheClearプロパティの設定方法によって異なる場合があります。
        
    -   **クリアしない** - パブリッシング時にコンポーネントキャッシュをクリアしないでください。