# AX - ボタンメニュー

## 概要

**AX - ボタンメニュー** は、Experience Sites のページでユーザーがボタンをクリックしたときにドロップダウンメニューを表示する Experience Cloud コンポーネントです。

ユーザーアカウント操作、クイックリンク、エクスポートオプション、レコード操作など、関連するアクションやナビゲーションオプションを単一のボタンの下にまとめるために使用します。メニュー項目は手動で構成することも、Experience Builder 内の Salesforce データから動的に取得することもできます。

コンパクトなナビゲーション、オーバーフローメニュー、ユーザープロファイル操作、一括操作、またはページを複数の個別ボタンで煩雑にしたくない場合に複数のオプションが必要なあらゆる場所に最適です。

## ボタンメニューの設定

ボタンメニューコンポーネントでは、ボタンクリックでトリガーされるドロップダウンメニューを作成できます。サイトのニーズに合わせてカスタマイズする方法は次のとおりです：

### **ラベル**

* **役割：** ボタンに表示されるテキストを設定します。
* **例：** 「ナビゲーション」、「操作」、「詳しくはこちら」

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

### **アイコン**

* **役割：** ボタンに視覚的なアイコンを追加します。
* **使用方法：** Lightning Design System の利用可能なアイコンから選択してください。
* **オプション：** アイコンを表示したくない場合は空白のままにできます。

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

### **ボタンスタイル**

* **役割：** サイトの外観に合わせてボタンの見た目を変更します。
* **オプション：**
  * ニュートラル
  * ブランド
  * 破壊的（削除のようなアクション向け）
  * 成功（肯定的なアクション向け）
  * その他...

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

外観設定を調整すると、ボタンの見た目をさらに個別化できます。たとえば「コンテナ」バリアントを選んでボタンの背景色を好みに合わせて変更したり、サイトで事前定義されたカラートークンを選択したりできます。

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

### **メニューの位置合わせ**

* **役割：** ドロップダウンメニューがボタンに対してどこに表示されるかを決定します。
* **オプション：**
  * 左
  * 右
  * 中央
  * 下左
  * その他...

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

### **メニュートリガー**

* **役割：** メニューがどのように開くかを制御します。
* **オプション：**
  * クリック
  * ホバー（マウスオーバーで開く）
  * フォーカス（キーボードフォーカスで開く）

<figure><img src="/files/6f3d058cf6b128ab00b58982e887175c49f2946e" alt=""><figcaption><p>メニュートリガーがホバーに設定されています</p></figcaption></figure>

### **ツールチップ**

* **役割：** ユーザーがボタンにホバーしたときに役立つ情報を表示します。
* **オプション：** 追加の説明が不要な場合は空白のままにしてください。

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

### **下向き矢印を非表示**

* **役割：** 通常メニューボタンに表示される下向きの矢印を削除します。
* **オプション：** よりすっきりした見た目を好む場合はこのボックスを選択してください。

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

### **幅いっぱいに伸ばす**

* **役割：** ボタンを利用可能な幅いっぱいに拡張します。
* **オプション：** より大きなボタンにしたい場合はこのボックスを選択してください。

### **ボタンを無効にする**

* **役割：** 一時的にボタンとメニューを使用できなくします。
* **オプション：** ユーザーが操作できないようにするにはこのボックスを選択してください。

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

### **メニューヌビン**

* メニューヌビンは、ボタンメニュー内のメニュー項目のそばにある小さく目立たない三角形です。
* それはメニュー項目をメニューを開くボタンに視覚的に接続し、ユーザーの視線を導きます。
* これにより、ユーザーはどのメニュー項目が特定のボタンに関連しているかをすばやく識別でき、全体的なユーザーエクスペリエンスが向上します。

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

### **メニュー項目**

* **役割：** ドロップダウンメニュー内のリンクまたはアクションを定義します。
* **使用方法：** ラベル（表示されるテキスト）と必要に応じてアイコンを追加してください。

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

#### 項目のナビゲーションを設定する

ボタンメニューをインタラクティブにするには、各メニュー項目をクリックしたときにどこに移動するかを指定する必要があります。これは「リンク先」セクションで行います。について詳しくは、 [トリガーできるさまざまな種類のアクション](/experience-cloud/experience-cloud-ja/chtoriaru/intarakushon.md) ここでボタンメニューからトリガーできるアクションの種類について詳しく学べます。

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

***

## **外観設定**

これらの設定により、サイトのデザインやブランディングに合わせてボタンメニューの見た目をカスタマイズできます。

### **余白**

* **役割：** ボタンの周囲のスペースを制御します。
* **使用方法：** 上、下、左、右のスペース値をスライダーまたは数値入力で調整してください。

### **ラベルとアイコン**

* **色：** ボタンがアクティブ（クリックまたはホバーされた）ときのデフォルト色とホバー色を選択してください。
* **フォントファミリー：** ラベルテキストのフォントを選択してください（例：Arial、Times New Roman、Verdana）。
* **フォントサイズ：** スライダーまたは数値入力でラベルテキストのサイズを調整します。
* **フォントスタイル：** 通常、斜体、または傾斜体を選択してください。
* **フォントウェイト：** テキストをライト、レギュラー、ミディアム、ボールド、またはエクストラボールドにします。
* **水平位置揃え：** アイコンをラベルテキストの左または右に配置するかを決定します。

### **背景**

* **色：** ボタンがアクティブなときのデフォルトの背景色と、非アクティブ時のホバー色を選択してください。

### **ボーダー**

ボタンがアクティブなときのデフォルト色と、ボタン周囲のボーダーのホバー色を選択してください。

* **サイズ：** スライダーまたは数値入力でボーダーの太さを調整します。
* **スタイル：** 実線、破線、点線、または二重線のいずれかを選択してください。
* **角の丸み：** スライダーまたは数値入力で角の丸みを調整できます（値が大きいほど角がより丸くなります）。

### **画像（メニュー項目用）**

* **カラー境界線：** メニュー項目の画像に境界線がある場合、その境界線の色を選択してください。
* **サイズ：** スライダーまたは数値入力でメニュー項目画像のサイズを調整します。
* **スタイリング：** 画像キャプションがある場合、そのスタイリングを通常、斜体、または傾斜体から選択してください。
* **角の丸み：** スライダーまたは数値入力でメニュー項目画像の角の丸みを調整します。
* **オブジェクトフィット：** 画像がコンテナ内にどのように収まるかを決定します（例：fill、contain、cover）。

## **重要な考慮事項**

* **スタイリング：** ボタンメニューの外観と操作感をサイトのブランディングに合わせてカスタマイズしてください。
* **リンク先：** メニュー項目とのユーザーインタラクションを処理するために「リンク先」操作を追加することを検討してください。


---

# Agent Instructions: 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-botanmeny.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.