> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-navigation.md).

# AX - ナビゲーション

## 概要

**AX - ナビゲーション** Experience Sites ページ上に、リンクやメニューを備えたカスタマイズ可能なナビゲーションバーを表示する Experience Cloud コンポーネントです。

標準の Experience Cloud ナビゲーションを超えたカスタムなナビゲーション構造を作成するために使用します。たとえば、セカンダリメニュー、コンテキストナビゲーション、アクション固有のリンクグループなどです。メニュー項目、スタイル、ドロップダウン、リンク先を Experience Builder でコードなしで設定できます。

カスタムページナビゲーション、コンテキストメニュー、クイックアクションリンク、またはポータルでデフォルトのサイトヘッダー以外のナビゲーションが必要なあらゆる場面に最適です。

{% hint style="danger" %}
このコンポーネントは [スロットを活用して](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズを実現するため、LWR サイトに最適です。Aura サイトでは、このレベルのカスタマイズはサポートされていません。
{% endhint %}

{% hint style="info" %}
Avonni Navigation コンポーネントは、より高い柔軟性を念頭に設計されています。標準の Salesforce ナビゲーションとは異なり、より複雑なメニュー構造に対応できます。複数レベルのメニューを作成できます。これらはレイヤーやステップのようなものだと考えてください。たとえば、メイン項目（レベル 1）、その下のサブ項目（レベル 2）、さらにその下のサブサブ項目（レベル 3）を設定できます。このような階層的なアプローチにより、大量の情報を構造化され、アクセスしやすい形で整理・表示しやすくなります。

さらに、Avonni はより幅広いスタイル設定オプションを提供します。これにより、ナビゲーションメニューの外観をブランドのスタイルに合わせて細かくカスタマイズできます。単なる主要カラーやフォントのオプションだけではありません。Avonni なら、より深いカスタマイズが可能で、視覚的に魅力的で、ブランドの自然な延長のように感じられるナビゲーション体験を作成できます。
{% endhint %}

## プロパティ

{% tabs %}
{% tab title="🎚️ 一般設定" %}

| 名前                    | 説明                                                         |
| --------------------- | ---------------------------------------------------------- |
| **`向き`**              | 従来の上部ナビゲーションバーにする「横方向」か、サイドバー形式のナビゲーションにする「縦方向」かを選択します。    |
| **`サイトロゴを表示`**        | ナビゲーションコンポーネント内にサイトロゴを表示するかを切り替えます。                        |
| **`上部固定`**            | 有効にすると、ユーザーがページを下にスクロールしてもナビゲーションバーをビューポート上部に固定できます。       |
| **`モバイルメニューを有効化`**    | 小さな画面でより使いやすい、モバイル向けに最適化されたメニューを有効にします。                    |
| **`ホバーでメニューを開く`**     | クリックを必要とせず、ユーザーがメニュー項目にカーソルを合わせたときにドロップダウンメニューが開くように設定します。 |
| **`シェーディング`**         | ナビゲーションバーに控えめな陰影効果を追加して、視覚的な奥行きを持たせます。                     |
| **`ドロップダウンのノブビンを表示`** | ドロップダウンが開いたときにメニュー項目を指す、小さな矢印のようなグラフィックを表示します。             |
| **`項目インジケーターを表示`**    | オンにすると、メニュー項目の下にさらに内容があることを示す視覚的なインジケーターを表示します。            |
| {% endtab %}          |                                                            |

{% tab title="🗄️ データソース設定" %}
**手動データソース:** これを使用してナビゲーション構造を作成し、各項目とそのプロパティを定義します。

| 名前                       | 説明                                                                                          |
| ------------------------ | ------------------------------------------------------------------------------------------- |
| **`ラベル`**                | 従来の上部ナビゲーションバーにする「横方向」か、サイドバー形式のナビゲーションにする「縦方向」かを選択します。                                     |
| **`説明`**                 | ナビゲーションコンポーネント内にサイトロゴを表示するかを切り替えます。                                                         |
| **`タグ`**                 | 有効にすると、ユーザーがページを下にスクロールしてもナビゲーションバーをビューポート上部に固定できます。                                        |
| **`ツールチップ`**             | 小さな画面でより使いやすい、モバイル向けに最適化されたメニューを有効にします。                                                     |
| **`アバターのバリアント`**         | クリックを必要とせず、ユーザーがメニュー項目にカーソルを合わせたときにドロップダウンメニューが開くように設定します。                                  |
| **`アバターアイコン名`**          | ナビゲーションバーに控えめな陰影効果を追加して、視覚的な奥行きを持たせます。                                                      |
| **`アバターアイコンサイズ`**        | ドロップダウンが開いたときにメニュー項目を指す、小さな矢印のようなグラフィックを表示します。                                              |
| **`アバター画像ソース`**          | オンにすると、メニュー項目の下にさらに内容があることを示す視覚的なインジケーターを表示します。                                             |
| **`サブ項目およびサブサブ項目のラベル`**  | サブ項目に表示されるテキスト。                                                                             |
| **`サブ項目およびサブサブ項目のリンク先`** | <p>サブ項目がリンクする URL またはサイトページ。</p><ul><li>これはさらに「サブサブ項目」にネストでき、同じ設定でさらにもう 1 段深くできます</li></ul> |
| {% endtab %}             |                                                                                             |

{% tab title="🎨 スタイリング" %}

### 一般的なナビゲーション設定

| 名前              | 説明                                      |
| --------------- | --------------------------------------- |
| **`サイズ`**       | ナビゲーションメニュー全体のサイズをカスタマイズします。            |
| **`背景色`**       | サイトのテーマに合うように背景色を設定します。                 |
| **`サイトロゴの最大幅`** | 一貫したブランド表示のために、サイトロゴの最大幅を定義します。         |
| **`下線のサイズ/色`**  | はっきりとした見た目になるよう、下部ボーダーのサイズと色をカスタマイズします。 |

### ナビゲーション項目設定

| 名前                | 説明                                                                         |
| ----------------- | -------------------------------------------------------------------------- |
| **`項目の幅、最小/最大幅`** | 各ナビゲーション項目の幅を指定します。                                                        |
| **`項目の背景色`**      | アクティブ状態とホバー状態で異なる背景色を設定します。                                                |
| **`項目ラベル`**       | 色、フォントサイズ、フォントファミリー、太さ、影など、ラベルテキストの広範なカスタマイズオプション。アクティブ状態とホバー状態は別々に設定できます。 |
| **`項目の説明`**       | 項目の説明テキストの色、フォントサイズ、フォントファミリー、太さ、影をカスタマイズします。                              |
| **`項目の境界線`**      | アクティブ状態向けの追加設定で、ボーダーのサイズと色を調整します。                                          |

### サブ項目とメニューのスタイル設定

| 名前                        | 説明                                                      |
| ------------------------- | ------------------------------------------------------- |
| **`サブ項目の背景色（選択時）`**       | 選択されたサブ項目の背景色を選択します。                                    |
| **`サブ項目の間隔（ブロック/インライン）`** | サブ項目の周囲の余白を調整します。                                       |
| **`サブ項目ラベル`**             | ホバー状態の設定を含む、テキスト色、フォントサイズ、フォントファミリー、太さ、影をカスタマイズするオプション。 |
| **`メニューのサイズ`**            | 最小/最大の幅と高さの設定を含めて、メニューのサイズを設定します。                       |
| **`メニュー列の幅`**             | メニュー内の列の幅を定義します。                                        |
| **`メニューの間隔（ブロック/インライン）`** | メニュー内の余白を調整します。                                         |
| **`メニューのボーダー`**           | メニューのボーダーの色、サイズ、スタイル、角丸をカスタマイズします。                      |
| **`メニューアイコン`**            | 通常、アクティブ、ホバー状態の色を設定します。                                 |
| **`メニューグループ / 列ラベル`**     | グループおよび列ラベル向けの、広範なテキストカスタマイズオプション。                      |

### ドロワーメニューのスタイル設定

| 名前                       | 説明                                                      |
| ------------------------ | ------------------------------------------------------- |
| **`ドロワーの背景色`**           | 開いた項目とセカンダリ背景色に対する異なる設定。                                |
| **`ドロワーのメイン/セカンダリタイトル`** | メインおよびセカンダリタイトルのテキスト色、フォントサイズ、フォントファミリー、太さ、影をカスタマイズします。 |
| **`ドロワーのセカンダリ説明`**       | テキスト色、フォントサイズ、フォントファミリー、太さ、影のオプション。                     |

### モバイルドロワーのスタイル設定

| 名前                           | 説明                                                |
| ---------------------------- | ------------------------------------------------- |
| **`モバイルドロワーのメイン/セカンダリタイトル`** | デスクトップのドロワーに似たカスタマイズオプションを、モバイル表示向けに調整したものです。     |
| **`モバイルドロワーのセカンダリ説明`**       | モバイルドロワー内の説明文のテキスト色、フォントサイズ、フォントファミリー、太さ、影を調整します。 |
| {% endtab %}                 |                                                   |
| {% endtabs %}                |                                                   |

## メニューの外観

この **`メニューバリアント`** Salesforce Experience Cloud 向けの Avonni Navigation コンポーネント内の設定は、メニュー全体のスタイルと動作を決定します。

{% hint style="info" %}
データソースが手動に設定されていて、メニューにサブ項目が含まれている場合は、「**`メニューバリアント`**」機能を使用できます。
{% endhint %}

<figure><img src="/files/aad888c278f6ab53c50df8b88d218e08633bf4d8" alt="" width="375"><figcaption></figcaption></figure>

メニューバリアントの一般的な意味は次のとおりです:

### ベース

この **`ベース`** バリアントは、ナビゲーションメニューの標準スタイルを表します。横向きでは通常は行として、縦向きでは列としてメニュー項目が並ぶ、わかりやすい構成です。すっきりしていてミニマルなので、クラシックな見た目を求める多くのサイトに適しています。

### ドロワー

この **`ドロワー`** このバリアントは、引き出しを開くようにサイドからスライドインするメニューを意味します。このスタイルは、特にモバイル表示や画面スペースが限られている場合に、縦型メニューでよく使われます。必要になるまでナビゲーションをしまっておき、メニューアイコン（多くの場合「ハンバーガー」アイコン）からアクセスできるようにします。

<figure><img src="/files/6256b8af7a4b2b7f926495dc40135beb8643ba39" alt=""><figcaption><p>ドロワーバリアントの例</p></figcaption></figure>

### カラム

この **`カラム`** バリアントでは、ドロップダウンメニューが列で表示され、ドロップダウン自体の中に複数レベルの構造化されたレイアウトを作成できます。これは、項目やカテゴリが多い複雑なナビゲーションを整理するのに特に役立ち、ユーザーが選択肢を閲覧しやすくなります。

<figure><img src="/files/c44b97469c314198f80363bf9ea7572bd3fb16be" alt=""><figcaption><p>カラムバリアントの例</p></figcaption></figure>

### タブ

この **`タブ`** バリアントは、トップレベルのメニュー項目をタブ形式のナビゲーションに変換します。このスタイルは、サイト内の異なるセクションを区切り、ナビゲーションバーから直接アクセスできるようにしたい場合によく使用されます。バインダーのタブや Web ブラウザーのタブのように、ユーザーにとってなじみのあるインターフェースを提供します。

これらの各バリアントは、サイトのナビゲーション体験を定義するのに役立ちます。したがって、サイトの設計方針に合致し、ユーザー体験を向上させるものを選ぶことが重要です。<br>

<figure><img src="/files/53ea617d9b2dc2416fa3818b74509ee888c0b0be" alt=""><figcaption><p>タブバリアントの例</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.