> 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="🎚️ 一般設定" %}

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

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

| 名前                       | 説明                                                                                           |
| ------------------------ | -------------------------------------------------------------------------------------------- |
| **`ラベル`**                | 'horizontal' では従来のトップナビゲーションバー、'vertical' ではサイドバー形式のナビゲーションを選択できます。                          |
| **`説明`**                 | ナビゲーションコンポーネント内にサイトロゴを表示する切り替えです。                                                            |
| **`タグ`**                 | 有効にすると、ユーザーがページをスクロールしてもナビゲーションバーをビューポート上部に固定できます。                                           |
| **`ツールチップ`**             | 小さな画面でもより使いやすい、モバイル最適化されたメニューを有効にします。                                                        |
| **`アバターのバリアント`**         | ユーザーがメニュー項目にカーソルを合わせたときにドロップダウンメニューを開くように設定します。クリックを必要としません。                                 |
| **`アバターアイコン名`**          | ナビゲーションバーに控えめな影効果を追加して、奥行きを演出します。                                                            |
| **`アバターアイコンサイズ`**        | ドロップダウンが開いたときに、メニュー項目を指す小さな矢印風の図形を表示します。                                                     |
| **`アバター画像ソース`**          | オンにすると、メニュー項目の下にさらに内容があることを示す視覚インジケーターを表示します。                                                |
| **`サブ項目およびサブサブ項目のラベル`**  | サブ項目に表示されるテキストです。                                                                            |
| **`サブ項目およびサブサブ項目のリンク先`** | <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>

### タブ

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

これらの各バリアントは、サイトのナビゲーション体験を形作るのに役立ちます。そのため、サイトのデザイン方針に合い、ユーザー体験を向上させるものを選ぶことが重要です。<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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.