> 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 名** コンポーネントを参照するために使用される一意の識別子です。 **モバイルメニューのバリアント** 小さい画面でメニューをどのように表示するかを選択します（`ドロワー` または `ドロップダウン`）、また **リンク先 – サイトロゴ** サイトロゴがクリックされたときに発生する動作を定義します。

### データソース

以下を使用 **手動データソース** ナビゲーション構造を作成し、各項目とそのプロパティを定義します：

**ラベル** は項目に表示されるテキストであり、 **説明** はそれに表示される任意の補足テキストです。

**タグ** 項目に小さなバッジを追加し、 **ツールチップ** その上にホバーしたときに表示されるテキストを設定します。

**アバターのバリアント**, **アバターアイコン名**, **アバターアイコンサイズ**、および **アバター画像ソース** 項目に任意のアバターを設定します—形状、フォールバックアイコン、サイズ、画像ソースを指定できます。

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

### メニューの外観

この **`メニューバリアント`** 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>

## スタイリング

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

| 名称              | 説明                                |
| --------------- | --------------------------------- |
| **`サイズ`**       | ナビゲーションメニュー全体の寸法をカスタマイズします。       |
| **`背景色`**       | サイトのテーマに合わせて背景色を設定します。            |
| **`サイトロゴの最大幅`** | 一貫したブランド表現のために、サイトロゴの最大幅を定義します。   |
| **`下罫線のサイズ/色`** | 特徴的な見た目にするため、下罫線のサイズと色をカスタマイズします。 |
| {% endtab %}    |                                   |

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

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

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

| 名称                          | 説明                                                              |
| --------------------------- | --------------------------------------------------------------- |
| **`サブ項目の背景色（選択時）`**         | 選択されたサブ項目の背景色を選択します。                                            |
| **`サブ項目のスペース（ブロック/インライン）`** | サブ項目の周囲のスペースを調整します。                                             |
| **`サブ項目ラベル`**               | ホバー状態の設定を含め、テキスト色、フォントサイズ、フォントファミリー、太さ、シャドウをカスタマイズするオプションがあります。 |
| **`メニューの寸法`**               | 最小/最大の幅と高さの設定で、メニューサイズを設定します。                                   |
| **`メニュー列の幅`**               | メニュー内の列の幅を定義します。                                                |
| **`メニューのスペース（ブロック/インライン）`** | メニュー内のスペースを調整します。                                               |
| **`メニューの罫線`**               | メニューの罫線の色、サイズ、スタイル、角丸をカスタマイズします。                                |
| **`メニューアイコン`**              | 通常状態、アクティブ状態、ホバー状態の色を設定します。                                     |
| **`メニューグループ / 列ラベル`**       | グループラベルと列ラベルのテキストには、幅広いカスタマイズオプションがあります。                        |
| {% endtab %}                |                                                                 |

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

| 名称                    | 説明                                                        |
| --------------------- | --------------------------------------------------------- |
| **`ドロワーの背景色`**        | 開いた項目とセカンダリ背景色に対して個別の設定があります。                             |
| **`ドロワーのメイン/サブタイトル`** | メインタイトルとサブタイトルのテキスト色、フォントサイズ、フォントファミリー、太さ、シャドウをカスタマイズします。 |
| **`ドロワーのセカンダリ説明`**    | テキスト色、フォントサイズ、フォントファミリー、太さ、シャドウを設定できます。                   |
| {% endtab %}          |                                                           |

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

| 名称                        | 説明                                                  |
| ------------------------- | --------------------------------------------------- |
| **`モバイルドロワーのメイン/サブタイトル`** | デスクトップのドロワーと同様のカスタマイズオプションを、モバイル表示向けに調整したものです。      |
| **`モバイルドロワーのセカンダリ説明`**    | モバイルドロワー内の説明のテキスト色、フォントサイズ、フォントファミリー、太さ、シャドウを調整します。 |
| {% 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 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.