# AX - ナビゲーション

## 概要

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

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

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

{% hint style="danger" %}
このコンポーネントは [スロットを活用し](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#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 コンポーネント内で、メニュー全体のスタイルと動作を決定します。&#x20;

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FheITUrRFqJjsehqJMajh%2F2023-11-21_08-13-43.png?alt=media&#x26;token=3edbbae6-021b-41a1-9197-af7b874485da" alt="" width="375"><figcaption></figcaption></figure>

以下は、メニューバリアントの一般的な意味です:

### ベース

この **`base`** バリアントは、ナビゲーションメニューの標準スタイルを表します。シンプルで、メニュー項目は通常、横向きでは行、縦向きでは列で一覧表示されます。このバリアントはクリーンでミニマルなため、クラシックな見た目が求められるほとんどのサイトに適しています。

### ドロワー

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FynfpnIAQAJYc9xFgWqaJ%2F2023-11-21_08-10-29.png?alt=media&#x26;token=11cbaae0-3c91-4e73-9bbd-1b3ca822b138" alt=""><figcaption><p>ドロワーバリアントの例</p></figcaption></figure>

### 列

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtnqvshtQOKoWLRqcEEaf%2F2023-11-21_08-09-24.jpg?alt=media&#x26;token=cd103933-17c4-4265-9b53-fca9d9cb4135" alt=""><figcaption><p>列バリアントの例</p></figcaption></figure>

### タブ

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FF8eD7FlemSW2Dx8ul1Fq%2F2023-11-21_08-08-26.jpg?alt=media&#x26;token=1c39cc95-3cdd-47d0-badb-7248e0b02f6a" alt=""><figcaption><p>タブバリアントの例</p></figcaption></figure>