> 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 - Button-Menü

## Übersicht

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

Verwenden Sie es, um zusammengehörige Aktionen oder Navigationsoptionen unter einer einzigen Schaltfläche zu gruppieren – wie Benutzerkontoaktionen, Schnelllinks, Exportoptionen oder Datensatzaktionen. Konfigurieren Sie Menüelemente manuell oder ziehen Sie sie dynamisch aus Salesforce-Daten in Experience Builder.

Ideal für kompakte Navigation, Overflow-Menüs, Benutzerprofilaktionen, Massenoperationen oder überall dort, wo Sie mehrere Optionen benötigen, ohne die Seite mit separaten Schaltflächen zu überladen.

## Button-Menü-Einstellungen

Mit der Button-Menü-Komponente können Sie ein Dropdown-Menü erstellen, das durch einen Klick auf eine Schaltfläche ausgelöst wird. So können Sie es an die Anforderungen Ihrer Website anpassen:

### **Beschriftung**

* **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 möchten.

<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-and-Feel Ihrer Website passt.
* **Optionen:**
  * Neutral
  * Marke
  * 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 Erscheinungseinstellungen 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 den für Ihre Website vordefinierten Farb-Token auswählen.

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

### **Menüausrichtung**

* **Was es bewirkt:** Bestimmt, wo das Dropdown-Menü relativ zur Schaltfläche erscheint.
* **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 sich das Menü öffnet.
* **Optionen:**
  * Klicken
  * Hover (beim Überfahren mit der Maus öffnen)
  * Fokus (bei Tastaturfokus öffnen)

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

### **QuickInfo**

* **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 erforderlich ist.

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

### **Abwärtspfeil ausblenden**

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

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

### **Auf volle Breite strecken**

* **Was es bewirkt:** Lässt die Schaltfläche sich ausdehnen, um die gesamte verfügbare Breite einzunehmen.
* **Optional:** Aktivieren Sie dieses Kontrollkästchen, wenn Sie eine größere Schaltfläche möchten.

### **Schaltfläche deaktivieren**

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

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

### **Menü-Nubbin**

* Der Menü-Nubbin ist ein kleines, unauffälliges Dreieck neben Menüelementen innerhalb eines Button-Menüs.
* Er verbindet das Menüelement optisch mit der Schaltfläche, die das Menü öffnet, und lenkt so den Blick des Benutzers.
* Dies hilft Benutzern, schnell zu erkennen, welches Menüelement mit einer bestimmten Schaltfläche verknüpft ist, und verbessert das gesamte Benutzererlebnis.

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

### **Menüelemente**

* **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 einem Symbol hinzu.

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

#### Elementnavigation festlegen

Um Ihr Button-Menü interaktiv zu machen, müssen Sie jedem Menüelement mitteilen, wohin es gehen soll, wenn jemand darauf klickt. Dies geschieht im Abschnitt „Link To“. Hier können Sie mehr über die [verschiedenen Aktionsarten](/experience-cloud/experience-cloud-de/anleitungen/interactions.md) erfahren, die Sie hier über das Button-Menü auslösen können.

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

***

## **Darstellungseinstellungen**

Mit diesen Einstellungen können Sie das Erscheinungsbild Ihres Button-Menüs visuell an das Design und Branding Ihrer Website anpassen.

### **Abstände**

* **Was es bewirkt:** Steuern Sie den Abstand um die Schaltfläche herum.
* **So verwenden Sie es:** Verwenden Sie Schieberegler oder Zahleneingaben, um die Abstände oben, unten, links und rechts anzupassen.

### **Beschriftung & Symbol**

* **Farbe:** Wählen Sie die Standardfarbe für den aktiven Zustand der Schaltfläche (angeklickt oder mit der Maus darüber) und eine Hover-Farbe.
* **Schriftart:** Wählen Sie die Schriftart für den Beschriftungstext (z. B. Arial, Times New Roman, Verdana).
* **Schriftgröße:** Passen Sie die Schriftgröße des Beschriftungstextes mit einem Schieberegler oder einer Zahleneingabe an.
* **Schriftstil:** Wählen Sie normalen, kursiven oder schrägen Text.
* **Schriftgewicht:** Machen Sie den Text leicht, regulär, mittel, fett oder extra fett.
* **Horizontale Ausrichtung:** Entscheiden Sie, ob sich das Symbol links oder rechts vom Beschriftungstext befinden soll.

### **Hintergrund**

* **Farbe:** Wählen Sie die Standardfarbe für den Hintergrund der Schaltfläche im aktiven Zustand und die Hover-Farbe, wenn sie inaktiv ist.

### **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 einem durchgezogenen, gestrichelten, gepunkteten oder doppelten Rahmen.
* **Radius:** Sie können die Rundung der Ecken mit einem Schieberegler oder einer Zahleneingabe anpassen (ein höherer Wert macht die Ecken runder).

### **Bild (für Menüelemente)**

* **Rahmenfarbe:** Wählen Sie die Rahmenfarbe um Bilder von Menüelementen (falls vorhanden).
* **Größe:** Passen Sie die Größe von Bildern der Menüelemente 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 der Menüelemente mit einem Schieberegler oder einer Zahleneingabe an.
* **Objektanpassung:** Entscheiden Sie, wie das Bild in seinen Container passen soll (z. B. ausfüllen, enthalten, bedecken).

## **Wichtige Hinweise**

* **Formatierung:** Passen Sie das Erscheinungsbild des Button-Menüs an das Branding Ihrer Website an.
* **Verknüpfen mit:** Erwägen Sie, eine „Verknüpfen mit“-Interaktion hinzuzufügen, um Benutzerinteraktionen mit den Menüelementen 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-button-menu.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.