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

ナビゲーションはどのページでも重要な要素です。デフォルトでは、以下のナビゲーションコンポーネントが利用可能です:

-   **リンクリスト** - タイトル、リンク、テキストを含むアイテムのリストを表示します。
    
    ![The Link list component.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/SXA-linklist.png)
    
-   **Navigation** - ナビゲーションメニューを生成すること。ナビゲーションコンポーネントは、ウェブサイトのユーザーにとって有利なナビゲーション設計を支援します。
    
    ![Big/Fat navigation component.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/SXA-navigation-bigfat.PNG)
    

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

1.  ページビルダー**エディター**モードで、**サイトツリー**でテーブルを追加したいページをクリックします。
2.  **コンポーネント**タブで**ナビゲーション**コンポーネントをクリックし、ページのキャンバスにドラッグします。
3.  例えば、ページタイトルの代わりに字幕を表示するバリアントを選択するには、右のペインの **「デザイン** > **アドバンススタイリング** > **バリアント** 」ドロップダウンメニューで、希望するバリアントを選択します。バリアントは表示されるフィールドとその見た目を決定します。
4.  ナビゲーションコンポーネントを設定するには、右側の **デザイン** > **スタイリング** セクションで、使用したいナビゲーションの種類を指定できます:
    -   **メインナビゲーション - ドロップダウン縦方向** – 標準ドロップダウンナビゲーション
    -   **メインナビゲーション - ドロップダウン横方向** – 子項目を1行にまとめたドロップダウンナビゲーション
    -   **サイドバーナビゲーション** – すべての子項目を縦に表示
    -   **サイトマップナビゲーション** - すべての子項目を縦に表示
    -   **ビッグ/ファットナビゲーション** – すべての子項目を横に表示します。
    -   **モバイルナビゲーション** – モバイル向けナビゲーション
5.  **「デザイン**\>**高度なスタイリング**」セクションでは、以下のフィールドを指定できます:
    -   **ナビゲーションのトップレベル** – ナビゲーションが始まるべきレベル(ルートから数えた)をクリックしてください。
    -   **ナビゲーションの下部レベル** – ナビゲーションが終了すべきレベル(ルートから数えた)をクリックしてください。
    -   **ナビゲーションフィルター** – リストからナビゲーションフィルターをクリックしてください。
    -   **フラットな構造** – このチェックボックスを選択して、すべてのアイテムを同じレベルに表示します。
    -   **ルートページを含める** – このチェックボックスを選択して、ナビゲーションリストにルートページを含めることができます。