> 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-de/experience-components/ax-button-menu.md).

# AX - Schaltflächenmenü

## Übersicht

**AX - Schaltflächenmenü** ist eine Experience-Cloud-Komponente, die ein Dropdown-Menü anzeigt, wenn Benutzer auf Experience-Sites-Seiten auf eine Schaltfläche klicken.

Verwenden Sie sie, um zusammengehörige Aktionen oder Navigationsoptionen unter einer einzigen Schaltfläche zu gruppieren – z. B. Aktionen für Benutzerkonten, Schnelllinks, Exportoptionen oder Datensatzaktionen. Konfigurieren Sie Menüpunkte manuell oder ziehen Sie sie dynamisch aus Salesforce-Daten im Experience Builder.

Perfekt für kompakte Navigation, Überlaufmenüs, Aktionen für Benutzerprofile, Massenoperationen oder überall dort, wo Sie mehrere Optionen benötigen, ohne die Seite mit separaten Schaltflächen zu überladen.

## Konfiguration

Die Komponente „Schaltflächenmenü“ ermöglicht es Ihnen, ein Dropdown-Menü zu erstellen, das durch einen Klick auf eine Schaltfläche ausgelöst wird. So können Sie sie an die Anforderungen Ihrer Website anpassen:

### **Bezeichnung**

* **Was es bewirkt:** Legt den Text fest, der auf der Schaltfläche angezeigt wird.
* **Beispiel:** „Navigation“, „Aktionen“, „Mehr erfahren“.

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

### **Symbol**

* **Was es bewirkt:** Fügt der Schaltfläche ein visuelles Symbol hinzu.
* **So verwenden Sie es:** Wählen Sie aus den verfügbaren Symbolen im Lightning Design System.
* **Optional:** Sie können dies leer lassen, wenn Sie kein Symbol wünschen.

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

### **Schaltflächenstil**

* **Was es bewirkt:** Ändert das Erscheinungsbild der Schaltfläche, damit es zum Look & Feel Ihrer Website passt.
* **Optionen:**
  * Neutral
  * Brand
  * Destruktiv (für Aktionen wie Löschen)
  * Erfolgreich (für positive Aktionen)
  * Mehr...

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

Durch Anpassen der Darstellungseinstellungen können Sie das Aussehen Ihrer Schaltfläche noch stärker personalisieren. Sie können beispielsweise die Variante „Container“ wählen, um die Hintergrundfarbe der Schaltfläche nach Ihren Wünschen zu ändern, oder das für Ihre Website vordefinierte Farb-Token auswählen.

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

### **Menüausrichtung**

* **Was es bewirkt:** Legt fest, wo das Dropdown-Menü in Bezug auf die Schaltfläche angezeigt wird.
* **Optionen:**
  * Links
  * Rechts
  * Zentriert
  * Unten links
  * Mehr...

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

### **Menüauslöser**

* **Was es bewirkt:** Steuert, wie das Menü geöffnet wird.
* **Optionen:**
  * Klick
  * Hover (beim Darüberfahren mit der Maus öffnen)
  * Fokus (beim Tastaturfokus öffnen)

<figure><img src="/files/ad0bc31d0cb7bb18acd63640588e20a569baabeb" alt=""><figcaption><p>Menüauslöser auf Hover gesetzt</p></figcaption></figure>

### **Tooltip**

* **Was es bewirkt:** Zeigt hilfreiche Informationen an, wenn Benutzer mit der Maus über die Schaltfläche fahren.
* **Optional:** Leer lassen, wenn keine zusätzliche Erklärung nötig ist.

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

### **Pfeil nach unten ausblenden**

* **Was es bewirkt:** Entfernt den nach unten gerichteten Pfeil, der normalerweise auf Menüschaltflächen angezeigt wird.
* **Optional:** Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein saubereres Aussehen bevorzugen.

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

### **Auf volle Breite strecken**

* **Was es bewirkt:** Lässt die Schaltfläche wachsen, sodass sie die gesamte verfügbare Breite einnimmt.
* **Optional:** Aktivieren Sie dieses Kontrollkästchen, wenn Sie eine größere Schaltfläche wünschen.

### **Schaltfläche deaktivieren**

* **Was es bewirkt:** Macht die Schaltfläche und das Menü vorübergehend unbenutzbar.
* **Optional:** Aktivieren Sie dieses Kontrollkästchen, um Benutzer an der Interaktion damit zu hindern.,

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

### **Menü-Nubbin**

* Der Menü-Nubbin ist ein kleines, dezentes Dreieck neben Menüpunkten innerhalb eines Schaltflächenmenüs.
* Er verbindet den Menüpunk visuell mit der Schaltfläche, die das Menü öffnet, und lenkt so den Blick des Benutzers.
* Dies hilft Benutzern, schnell zu erkennen, welcher Menüpunk mit einer bestimmten Schaltfläche verbunden ist, und verbessert so das gesamte Benutzererlebnis.

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

### **Menüpunkte**

* **Was es bewirkt:** Definiert die Links oder Aktionen im Dropdown-Menü.
* **So verwenden Sie es:** Fügen Sie Elemente mit Bezeichnungen (dem angezeigten Text) und bei Bedarf mit einem Symbol hinzu.

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

#### Navigation für Elemente festlegen

Damit Ihr Schaltflächenmenü interaktiv ist, müssen Sie jedem Menüpunk sagen, wohin es gehen soll, wenn jemand darauf klickt. Dies geschieht im Bereich „Link To“. Mehr über die [verschiedenen Arten von Aktionen](/experience-cloud/experience-cloud-de/anleitungen/interactions.md) erfahren Sie hier, die Sie über das Schaltflächenmenü auslösen können.

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

### Zusätzliche Einstellungen

**Symbolgröße** legt die Größe des Schaltflächensymbols fest, und **CMS-Icon-Quelle** / **Icon-URL oder Ausdruck** ermöglichen Ihnen, statt eines Lightning-Design-System-Symbols ein CMS-Bild oder eine URL als Symbol zu verwenden.

**Menülänge** legt fest, wie viele Elemente sichtbar sind, bevor das Dropdown scrollt (`5 Elemente`, `7 Elemente`, `10 Elemente`), und **Häkchen ausblenden** blendet das Häkchen aus, das neben einem ausgewählten Element angezeigt wird.

**Suche zulassen** fügt im Dropdown ein Suchfeld hinzu, mit **Platzhaltertext für Suchfeld** wird der Platzhaltertext festgelegt.

**Wert** legt das standardmäßig ausgewählte Element fest, und **Horizontale Ausrichtung** positioniert die Schaltfläche innerhalb ihres Containers (`links`, `zentriert`, `rechts`).

**Titel** legt den Tooltip-Text der Schaltfläche fest, und **Alternativtext** liefert barrierefreien Text für eine Schaltfläche, die nur aus einem Symbol besteht. **Ist Entwurf** zeigt auf der Schaltfläche einen Entwurfsindikator an, mit **Alternativtext für Entwurf** der erklärt, warum er angezeigt wird.

## Stil

Mit diesen Einstellungen können Sie das Erscheinungsbild Ihres Schaltflächenmenüs visuell an das Design und Branding Ihrer Website anpassen.

{% tabs %}
{% tab title="Abstand" %}

* **Was es bewirkt:** Steuern Sie den Abstand rund um die Schaltfläche.
* **So verwenden Sie es:** Verwenden Sie Schieberegler oder Zahleneingaben, um die oberen, unteren, linken und rechten Abstandswerte anzupassen.
  {% endtab %}

{% tab title="Beschriftung & Symbol" %}

* **Farbe:** Wählen Sie die Standardfarbe für den aktiven Zustand der Schaltfläche (geklickt oder darübergefahren) sowie eine Hover-Farbe.
* **Schriftfamilie:** Wählen Sie die Schriftart für den Beschriftungstext (z. B. Arial, Times New Roman, Verdana).
* **Schriftgröße:** Passen Sie die Größe des Beschriftungstexts mit einem Schieberegler oder einer Zahleneingabe an.
* **Schriftstil:** Wählen Sie normalen, kursiven oder schrägen Text.
* **Schriftstärke:** Machen Sie den Text leicht, normal, mittel, fett oder extrafett.
* **Horizontale Ausrichtung:** Entscheiden Sie, ob das Symbol links oder rechts vom Beschriftungstext angezeigt werden soll.
  {% endtab %}

{% tab title="Hintergrund" %}

* **Farbe:** Wählen Sie die Standardfarbe für den Hintergrund der Schaltfläche, wenn sie aktiv ist, und die Hover-Farbe, wenn sie inaktiv ist.
  {% endtab %}

{% tab title="Rahmen" %}
Wählen Sie die Standardfarbe für den aktiven Zustand der Schaltfläche und die Hover-Farbe für den Rahmen um die Schaltfläche.

* **Größe:** Passen Sie die Dicke des Rahmens mit einem Schieberegler oder einer Zahleneingabe an.
* **Stil:** Wählen Sie zwischen durchgezogenem, gestricheltem, gepunktetem oder doppelt umrandetem Rahmen.
* **Radius:** Sie können die Rundung der Ecken mit einem Schieberegler oder einer Zahleneingabe anpassen (ein höherer Wert macht die Ecken runder).
  {% endtab %}

{% tab title="Bild (für Menüpunkte)" %}

* **Rahmenfarbe:** Wählen Sie die Rahmenfarbe um Bilder von Menüpunkten (falls vorhanden).
* **Größe:** Passen Sie die Größe von Bildern von Menüpunkten mit einem Schieberegler oder einer Zahleneingabe an.
* **Formatierung:** Wählen Sie für Bildunterschriften (falls vorhanden) die Formatierung normal, kursiv oder schräg.
* **Radius:** Passen Sie die Rundung der Ecken von Bildern von Menüpunkten mit einem Schieberegler oder einer Zahleneingabe an.
* **Objektanpassung:** Entscheiden Sie, wie das Bild in seinen Container passen soll (z. B. fill, contain, cover).
  {% endtab %}
  {% endtabs %}

## **Wichtige Überlegungen**

* **Formatierung:** Passen Sie das Erscheinungsbild des Schaltflächenmenüs an das Branding Ihrer Website an.
* **Verknüpfen mit:** Erwägen Sie, die Interaktion „Link To“ hinzuzufügen, um Benutzerinteraktionen mit den Menüpunkten zu verarbeiten.


---

# 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-de/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.