> 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 %}

## 設定

### 一般設定

**方向** を選択します `水平` （デフォルト — 従来の上部ナビゲーションバー）または `垂直` （サイドバー形式のナビゲーション）。

**サイトロゴを表示** は、ナビゲーションコンポーネント内でのサイトロゴの表示を切り替えます。

**上部に固定** は、ユーザーがページを下へスクロールしても、ナビゲーションバーをビューポートの上部に維持します。

**モバイルメニューを有効化** は、小さな画面でのナビゲーションを改善するため、モバイルに最適化されたメニューを有効にします。

**ホバーでメニューを開く** は、クリックを必要とせず、ユーザーがメニュー項目にカーソルを合わせたときにドロップダウンメニューを開きます。

**シェーディング（非推奨）** は、視覚的な奥行きを出すためにナビゲーションバーに控えめな陰影効果を追加します。既存ページのために保持されています。代わりに、バーのスタイルは **スタイル** タブから設定してください。

**ドロップダウンのヌビンを表示** は、ドロップダウンが開いているときにメニュー項目を指す小さな矢印状のグラフィックを表示します。

**インジケーター属性** は、メニュー項目の下にさらにコンテンツがあることを示す視覚的なインジケーターを追加します。 **表示** をオンにしてから、その **位置**, `前` または `後` を項目に対して設定します。

**API 名** は、コンポーネントを参照するために使用される一意の識別子です。 **モバイルメニューのバリアント** は、小さな画面でメニューをどのようにレンダリングするかを選択します（`ドロワー`（デフォルト）または `ドロップダウン`）。また、 **リンク先 - サイトロゴ** は、サイトロゴをクリックしたときにトリガーされるインタラクションを定義します。

### データソース

ナビゲーション構造は、次の 3 つのソースのいずれかから取得されます。

| データソースタイプ       | 説明                                                                                            | 使用例                                             |
| --------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| **手動**          | すべての項目、サブ項目、サブサブ項目をビルダーで直接入力します。                                                              | 固定ナビゲーション、およびアバターや 3 レベル以上を必要とするメニューに適しています。    |
| **クエリ**         | Salesforce オブジェクトのレコードから各項目を構築します。                                                            | カテゴリや製品のリストなど、データによって駆動されるナビゲーションに適しています。       |
| **ナビゲーションメニュー** | サイト独自のナビゲーションメニューの 1 つを再利用します。で選択し **ナビゲーションメニュー**、 **ホームメニュー項目を表示** をオンにして、メニューのホーム項目を維持します。 | Experience Builder ですでに管理されているサイトナビゲーションを反映します。 |

次の **手動** ソースでは、各項目とそのプロパティを定義します。

**ラベル** は項目に表示されるテキストであり、 **説明** はそれとともに表示される任意の補助テキストです。説明は垂直方向で表示されます。水平方向では、サブ項目の説明は `ドロワー` メニューバリアントでのみ表示されます。

**タグ** は項目に小さなバッジを追加し、 **タグバリアント** はその色を設定します（`ベース`, `ブランド`, `反転`, `代替反転`, `成功`, `情報`, `警告`, `エラー` または `オフライン`), **タグのアウトライン** はその周囲にアウトラインを描画し、 **ツールチップ** は項目にカーソルを合わせたときに表示されるテキストを設定します。

**アバター** は項目上の任意のアバターを設定します。その **バリアント** (`円形` または `正方形`）、フォールバックの **アイコン名**、 **アイコンサイズ** (`XXS`, `XS`, `小`, `中` または `大`）および **画像ソース**.

**シェブロンを非表示** は項目のシェブロンを削除するため、項目上のどこをクリックしてもサブ項目が表示されます。

**サブ項目およびサブサブ項目のラベル** はサブ項目に表示されるテキストであり、 **サブ項目およびサブサブ項目のリンク先** はリンク先の URL またはサイトページです。項目は同じ設定で、さらに 1 レベル「サブサブ項目」としてネストできます。

次の **クエリ** ソースでは、各項目はクエリされたオブジェクトのフィールドからマッピングされます。 **ラベル**、項目の一意の **値**, **説明**, **タグ**, **タグバリアント**, **タグのアウトライン**, **ツールチップ**, **アイコン名**, **アイコンサイズ** (`XXS`, `XS`, `小`, `中` または `大`）および **リンク先**、項目が選択されたときに実行されるインタラクションです。

### メニューの外観

その **メニューバリアント** の設定は、Salesforce Experience Cloud の Avonni Navigation コンポーネントにおいて、メニューの全体的なスタイルと動作を決定します。

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-e2fb8e6c6de07edb9816cf714e46cca8d4c96a0b%2F2023-11-21_08-13-43.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

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

#### ベース

その **ベース** バリアントは、ナビゲーションメニューの標準スタイルを表します。シンプルで、通常、メニュー項目は水平方向では行に、垂直方向では列に並べられます。このバリアントはすっきりとしてミニマルであり、クラシックな外観が求められるほとんどのサイトに適しています。

#### ドロワー

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-3c6246c3ce6ac52a497ff1bdc120df8f59b26e68%2F2023-11-21_08-10-29.png?alt=media" alt=""><figcaption><p>ドロワーバリアントの例</p></figcaption></figure>

#### 列

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-794aefdc392c5dcd3656aeee3173b568091836b7%2F2023-11-21_08-09-24.jpg?alt=media" alt=""><figcaption><p>列バリアントの例</p></figcaption></figure>

#### タブ

その **タブ** バリアントは、最上位のメニュー項目をタブ形式のナビゲーションに変換します。このスタイルは、サイトの異なるセクションを区別し、ナビゲーションバーから直接アクセスできるようにする必要がある場合によく使用されます。バインダーやウェブブラウザーのタブのような、ユーザーにとって親しみやすいインターフェイスを提供します。

これらの各バリアントはサイトのナビゲーション体験を定義するのに役立つため、サイトのデザイン原則に合致し、ユーザージャーニーを向上させるものを選択することが重要です。<br>

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-7e84f7c8e2d88f0da6072a7e31522a47a8000274%2F2023-11-21_08-08-26.jpg?alt=media" alt=""><figcaption><p>タブバリアントの例</p></figcaption></figure>

## スタイリング

{% tabs %}
{% tab title="一般ナビゲーション設定" %}

| Name             | 説明                                  |
| ---------------- | ----------------------------------- |
| **サイズ**          | ナビゲーションメニューの全体的な寸法をカスタマイズします。       |
| **背景色**          | サイトのテーマに合うように背景色を設定します。             |
| **サイトロゴの最大幅**    | 一貫したブランディングのため、サイトロゴの最大幅を定義します。     |
| **下部ボーダーのサイズ/色** | 個性的な外観にするため、下部ボーダーのサイズと色をカスタマイズします。 |
| {% endtab %}     |                                     |

{% tab title="ナビゲーション項目の設定" %}

| Name            | 説明                                                                               |
| --------------- | -------------------------------------------------------------------------------- |
| **項目の幅、最小/最大幅** | 各ナビゲーション項目の幅の寸法を指定します。                                                           |
| **項目の背景色**      | アクティブ状態とホバー状態に異なる背景色を設定します。                                                      |
| **項目ラベル**       | 色、フォントサイズ、フォントファミリー、太さ、影など、ラベルテキストの幅広いカスタマイズオプションを提供し、アクティブ状態とホバー状態には個別の設定があります。 |
| **項目の説明**       | 項目説明のテキスト色、フォントサイズ、フォントファミリー、太さ、影をカスタマイズします。                                     |
| **項目の境界線**      | アクティブ状態用の追加設定とともに、ボーダーのサイズと色を調整します。                                              |
| {% endtab %}    |                                                                                  |

{% tab title="サブ項目とメニューのスタイル設定" %}

| Name                    | 説明                                                           |
| ----------------------- | ------------------------------------------------------------ |
| **サブ項目の背景色（選択時）**       | 選択されたサブ項目の背景色を選択します。                                         |
| **サブ項目の間隔（ブロック/インライン）** | サブ項目の周囲の間隔を調整します。                                            |
| **サブ項目ラベル**             | ホバー状態の設定を含む、テキスト色、フォントサイズ、フォントファミリー、太さ、影をカスタマイズするためのオプションです。 |
| **メニューの寸法**             | 最小および最大の幅/高さ設定を使用して、メニューサイズを設定します。                           |
| **メニュー列の幅**             | メニュー内の列の幅を定義します。                                             |
| **メニューの間隔（ブロック/インライン）** | メニュー内の間隔を調整します。                                              |
| **メニューボーダー**            | メニューボーダーの色、サイズ、スタイル、半径をカスタマイズします。                            |
| **メニューアイコン**            | 通常、アクティブ、ホバー状態の色を設定します。                                      |
| **メニューグループ / 列ラベル**     | グループおよび列ラベル用の幅広いテキストカスタマイズオプションです。                           |
| {% endtab %}            |                                                              |

{% tab title="ドロワーメニューのスタイル設定" %}

| Name                   | 説明                                                      |
| ---------------------- | ------------------------------------------------------- |
| **ドロワーの背景色**           | 開いている項目およびセカンダリ背景色用の異なる設定です。                            |
| **ドロワーのメイン/セカンダリタイトル** | メインおよびセカンダリタイトルのテキスト色、フォントサイズ、フォントファミリー、太さ、影をカスタマイズします。 |
| **ドロワーのセカンダリ説明**       | テキスト色、フォントサイズ、フォントファミリー、太さ、影のオプションです。                   |
| {% endtab %}           |                                                         |

{% tab title="モバイルドロワーのスタイル設定" %}

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


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.