> 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-button-menu.md).

# AX - ボタンメニュー

## 概要

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

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

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

## 設定

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

### **ラベル**

* **機能：** ボタンに表示されるテキストを設定します。
* **例：** 「ナビゲーション」「アクション」「詳細はこちら」

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

表示設定を調整することで、ボタンの見た目をさらに細かくカスタマイズできます。たとえば、「Container」バリアントを選択してボタンの背景色を好みに変更したり、サイト用にあらかじめ定義されたカラートークンを選択したりできます。

<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/interactions.md) ボタンメニューから実行できるアクションについて、こちらで確認できます。

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

### 追加設定

**アイコンサイズ** ボタンアイコンのサイズを設定し、 **CMS アイコンソース** / **アイコン URL または式** Lightning Design System のアイコンの代わりに、CMS 画像または URL をアイコンとして使用できます。

**メニューの表示件数** ドロップダウンがスクロールするまでに表示される項目数を設定します（`5件`, `7件`, `10件`）、また **チェックマークを非表示** 選択した項目の横に表示されるチェックマークを非表示にします。

**検索を許可** ドロップダウン内に検索ボックスを追加し、 **検索入力のプレースホルダー** プレースホルダーテキストを設定します。

**値** デフォルトで選択される項目を設定し、 **水平配置** コンテナ内でのボタンの位置を指定します（`左`, `中央`, `右`).

**タイトル** ボタンのツールチップテキストを設定し、 **代替テキスト** アイコンのみのボタンにアクセシブルなテキストを提供します。 **下書きです** ボタンに下書きのインジケーターを表示し、 **下書きの代替テキスト** 表示されている理由を説明します。

## スタイル

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

{% tabs %}
{% tab title="間隔" %}

* **機能：** ボタンの周囲の余白を調整します。
* **使い方：** スライダーまたは数値入力で、上、下、左、右の余白値を調整します。
  {% endtab %}

{% tab title="ラベルとアイコン" %}

* **色：** ボタンがアクティブ（クリックまたはホバー）なときの既定色と、ホバー時の色を選択します。
* **フォントファミリー：** ラベルテキストのフォントを選択します（例：Arial、Times New Roman、Verdana）。
* **フォントサイズ：** スライダーまたは数値入力でラベルテキストのサイズを調整します。
* **フォントスタイル：** 通常、イタリック、またはオブリークを選択します。
* **フォントの太さ：** テキストを light、regular、medium、bold、または extra bold にします。
* **水平配置：** アイコンをラベルテキストの左側に配置するか右側に配置するかを決めます。
  {% endtab %}

{% tab title="背景" %}

* **色：** ボタンがアクティブなときの背景の既定色と、非アクティブなときのホバー色を選択します。
  {% endtab %}

{% tab title="ボーダー" %}
ボタンがアクティブなときの既定色と、ボタンの枠線のホバー色を選択します。

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

{% tab title="画像（メニュー項目用）" %}

* **境界線の色：** メニュー項目の画像の周囲の境界線の色を選択します（ある場合）。
* **サイズ：** スライダーまたは数値入力でメニュー項目の画像サイズを調整します。
* **スタイル設定：** 画像キャプション（ある場合）のスタイルとして、通常、イタリック、またはオブリークを選択します。
* **角丸：** スライダーまたは数値入力でメニュー項目画像の角の丸みを調整します。
* **オブジェクトフィット：** 画像をコンテナ内にどのように収めるかを決めます（例：fill、contain、cover）。
  {% 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-button-menu.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.