Abzeichen & Benachrichtigungspunkte

Lenke die Aufmerksamkeit auf einzelne Menüpunkte mit einem kleinen Textabzeichen (z. B. „Neu", „Hot") oder einem einfachen Benachrichtigungspunkt.

MenuX-Element-Komponenten: Textabzeichen, Benachrichtigungspunkt, CTA-Buttons und Dropdown-Indikatoren

Textabzeichen

Ein Abzeichen ist ein kleines farbiges Label neben dem Menüpunkt-Text — ideal zum Hervorheben neuer Bereiche oder Aktionen.

  1. Gehe zu Menu Builder → Menüstruktur.
  2. Klicke auf einen Menüpunkt, um seine Optionen zu erweitern.
  3. Gib den Abzeichentext im Feld Abzeichen ein (z. B. Neu, Hot, Sale).
  4. Optional eine Abzeichen-Hintergrundfarbe wählen.
  5. Klicke auf Menü speichern.
ℹ️

Abzeichen sind dekorativ und mit aria-hidden markiert, damit sie Screenreader-Nutzer nicht stören. Halte die Bezeichnung kurz — ein oder zwei Wörter sind optimal.

Benachrichtigungspunkt

Ein Benachrichtigungspunkt ist ein kleiner farbiger Kreis an einem Menüpunkt — nützlich, um ungelesene Aktivitäten oder neue Funktionen ohne Text zu signalisieren.

  1. Erweitere in Menu Builder → Menüstruktur einen Menüpunkt.
  2. Aktiviere das Kontrollkästchen 🔴 Punkt.
  3. Klicke auf Menü speichern.
💡

Der Punkt enthält versteckten Screenreader-Text, damit assistive Technologie trotzdem mitteilt, dass das Element eine Benachrichtigung hat.

Element-Icons

Jeder Menüpunkt kann auch ein Font Awesome 6-Icon vor seiner Bezeichnung anzeigen. Beim Hinzufügen oder Bearbeiten eines Elements die Icon-Klasse im Icon-Feld eingeben — z. B. fas fa-home oder fas fa-cart-shopping.