Ein- und ausblendbare, kontextbezogene Menüs für Links, Buttons, Formulare und eigene Inhalte.

Menüs öffnen per Klick auf einen Auslöser und werden mit Floating UI dynamisch am Viewport ausgerichtet. Sie eignen sich für einfache Linklisten genauso wie für verschachtelte Aktionsmenüs.

• Flexible Platzierung: physisch oder logisch (RTL-fähig), auch je Breakpoint.
• Reichhaltige Einträge: Icons, Beschreibungen, Auswahlhäkchen, Themenfarben.
• Untermenüs: mehrstufig, per Hover oder Klick, auf kleinen Bildschirmen gestapelt.
• Tastatur: Pfeiltasten, Pos1/Ende, Esc und Tab funktionieren ohne Zusatzaufwand.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Überblick

Menüs schaltest du am besten mit Buttons um. Hier ein Beispiel mit einem Bootstrap-Button:

<button class="btn-solid theme-primary" type="button" data-bs-toggle="menu" aria-expanded="false">
  Menü umschalten
</button>
<div class="menu">
  <a class="menu-item" href="#">Menüeintrag 1</a>
  <a class="menu-item" href="#">Menüeintrag 2</a>
  <a class="menu-item" href="#">Menüeintrag 3</a>
</div>

Menüs sind ein- und ausblendbare, kontextbezogene Overlays für Linklisten und mehr. Interaktiv werden sie durch das mitgelieferte Menu-Plugin. Geöffnet wird per Klick, nicht per Hover – das ist eine bewusste Designentscheidung.

Für Positionierung und Viewport-Erkennung nutzen Menüs die Bibliothek Floating UI. Verwende bootstrap.bundle.min.js / bootstrap.bundle.js, das Floating UI enthält, oder binde Floating UI separat per Import Map ein. In Navbars wird Floating UI nicht verwendet, da dort keine dynamische Positionierung nötig ist.

Beispiele

Empfohlen ist ein <button> als Auslöser. Musst du ein <a> verwenden, ergänze role="button", damit Hilfstechnologien wie Screenreader den Zweck richtig erkennen.

Mit Button-Gruppen baust du Split-Buttons, bei denen ein zweiter Button das Menü öffnet.

<a class="btn-solid theme-primary" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
  Menü umschalten
</a>
<div class="menu">
  <a class="menu-item" href="#">Menüeintrag 1</a>
  <a class="menu-item" href="#">Menüeintrag 2</a>
  <a class="menu-item" href="#">Menüeintrag 3</a>
</div>

<div class="btn-group">
  <button type="button" class="btn-solid theme-secondary">Split</button>
  <button type="button" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" aria-expanded="false">
    <svg class="bi" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708m0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"/></svg>
    <span class="visually-hidden">Menü umschalten</span>
  </button>
  <div class="menu">
    <a class="menu-item" href="#">Aktion</a>
    <a class="menu-item" href="#">Weitere Aktion</a>
    <a class="menu-item" href="#">Noch etwas anderes</a>
    <hr class="menu-divider">
    <a class="menu-item" href="#">Abgetrennter Link</a>
  </div>
</div>

Dunkle Menüs

Für dunkle Menüs – etwa passend zu einer dunklen Navbar – setzt du data-bs-theme="dark" an den Auslöser oder ein Elternelement.

<div data-bs-theme="dark">
  <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">
    Menü-Button
  </button>
  <div class="menu">
    <a class="menu-item active" href="#">Aktion</a>
    <a class="menu-item" href="#">Weitere Aktion</a>
    <a class="menu-item" href="#">Noch etwas anderes</a>
    <hr class="menu-divider">
    <a class="menu-item" href="#">Abgetrennter Link</a>
  </div>
</div>

Und so sieht das in einer Navbar aus:

<nav class="navbar" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item" data-bs-theme="dark">
        <button class="btn-solid theme-secondary" data-bs-toggle="menu" aria-expanded="false">
          Menü
        </button>
        <div class="menu">
          <a class="menu-item" href="#">Aktion</a>
          <a class="menu-item" href="#">Weitere Aktion</a>
          <a class="menu-item" href="#">Noch etwas anderes</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Durchscheinende Menüs

.menu-translucent zeichnet den Hintergrund des Menüs weich und farbintensiver – ein halbtransparenter Effekt.

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">
  Menü-Button
</button>
<div class="menu menu-translucent">
  <a class="menu-item active" href="#">Aktiver Menüeintrag</a>
  <a class="menu-item" href="#">Menüeintrag</a>
  <a class="menu-item" href="#">Menüeintrag</a>
  <a class="menu-item" href="#">Menüeintrag</a>
  <a class="menu-item" href="#">Menüeintrag</a>
  <hr class="menu-divider">
  <a class="menu-item theme-danger" href="#">Gefährlicher Menüeintrag</a>
</div>

Platzierung

Mit data-bs-placement am Auslöser legst du fest, wo das Menü erscheint.

• Physische Platzierungen:top, bottom, left, right – feste Richtungen, unabhängig von der Schreibrichtung.
• Logische Platzierungen:start, end – drehen sich bei RTL automatisch um. In LTR wird start zu left und end zu right, in RTL umgekehrt.

Alle Platzierungen unterstützen die Ausrichtungszusätze -start und -end (z. B. bottom-start, end-end). Einen interaktiven Platzierungs-Spielplatz findest du in der Originaldokumentation.

Responsive

Mit responsiven Präfixen änderst du die Platzierung je Breakpoint. Die Syntax lautet breakpoint:platzierung, mit sm, md, lg, xl oder 2xl als Breakpoint. Mehrere Angaben trennst du mit Leerzeichen.

data-bs-placement="bottom-start md:bottom-end lg:end-start" zum Beispiel:

• zeigt das Menü auf kleinen Bildschirmen bei bottom-start (Standard),
• wechselt ab md zu bottom-end,
• wechselt ab lg zu right-start.

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-placement="bottom-start md:bottom-end" aria-expanded="false">
  Unten Anfang → md:bottom-end
</button>
<div class="menu">
  <a class="menu-item" href="#">Aktion</a>
  <a class="menu-item" href="#">Weitere Aktion</a>
</div>

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-placement="bottom lg:right" aria-expanded="false">
  Unten → lg:right
</button>
<div class="menu">
  <a class="menu-item" href="#">Aktion</a>
  <a class="menu-item" href="#">Weitere Aktion</a>
</div>

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-placement="top-end md:right-start xl:bottom-start" aria-expanded="false">
  Mehrere Breakpoints
</button>
<div class="menu">
  <a class="menu-item" href="#">Aktion</a>
  <a class="menu-item" href="#">Weitere Aktion</a>
</div>

Ändere die Fenstergröße, um den Wechsel der Platzierung zu sehen.

Menüeinträge

Als Menüeinträge eignen sich <a>- und <button>-Elemente.

<div class="menu show position-static">
  <button class="menu-item" type="button">Aktion</button>
  <button class="menu-item" type="button">Weitere Aktion</button>
  <button class="menu-item" type="button">Noch etwas anderes</button>
</div>

Nicht-interaktive Einträge erzeugst du mit .menu-text. Gestalte sie bei Bedarf mit eigenem CSS oder Text-Utilities.

<div class="menu show position-static">
  <span class="menu-text">Menütext</span>
  <a class="menu-item" href="#">Aktion</a>
  <a class="menu-item" href="#">Weitere Aktion</a>
  <a class="menu-item" href="#">Noch etwas anderes</a>
</div>

Aktiv

.active kennzeichnet den aktiven Eintrag. Für Hilfstechnologien ergänzt du aria-current – mit page für die aktuelle Seite oder true für das aktuelle Element einer Gruppe.

<div class="menu show position-static">
  <a class="menu-item" href="#">Normaler Link</a>
  <a class="menu-item active" href="#" aria-current="true">Aktiver Link</a>
  <a class="menu-item" href="#">Weiterer Link</a>
</div>

Deaktiviert

.disabled stellt Einträge als deaktiviert dar.

<div class="menu show position-static">
  <a class="menu-item" href="#">Normaler Link</a>
  <a class="menu-item disabled" aria-disabled="true">Deaktivierter Link</a>
  <a class="menu-item" href="#">Weiterer Link</a>
</div>

Varianten

Mit dem Präfix theme- bekommt ein Eintrag eine Themenfarbe.

<div class="menu show position-static">
  <a class="menu-item theme-primary" href="#">Primary-Link</a>
  <a class="menu-item theme-secondary" href="#">Secondary-Link</a>
  <a class="menu-item theme-success" href="#">Success-Link</a>
  <a class="menu-item theme-danger" href="#">Danger-Link</a>
</div>
<div class="menu show position-static">
  <a class="menu-item active theme-primary" href="#">Primary-Link</a>
  <a class="menu-item active theme-secondary" href="#">Secondary-Link</a>
  <a class="menu-item active theme-success" href="#">Success-Link</a>
  <a class="menu-item active theme-danger" href="#">Danger-Link</a>
</div>

Icons

.menu-item-icon direkt an einem <svg> schafft einen Icon-Platz im Menüeintrag.

<div class="menu show position-static">
  <button class="menu-item" type="button">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="menu-item-icon fg-3" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
    </svg>
    Kopieren
  </button>
  <button class="menu-item" type="button">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="menu-item-icon fg-3" viewBox="0 0 16 16">
      <path d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
    </svg>
    Ausschneiden
  </button>
  <hr class="menu-divider">
  <button class="menu-item theme-danger" type="button">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="menu-item-icon" viewBox="0 0 16 16">
      <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
    </svg>
    Löschen
  </button>
</div>

Beschreibungen

.menu-item-content ordnet den Inhalt als Spalte an, .menu-item-description setzt einen Zusatztext unter die Hauptbeschriftung.

<div class="menu show position-static">
  <button class="menu-item" type="button">
    <span class="menu-item-content">
      Jetzt veröffentlichen
      <small class="menu-item-description">Seite sofort sichtbar machen</small>
    </span>
  </button>
  <button class="menu-item" type="button">
    <span class="menu-item-content">
      Planen
      <small class="menu-item-description">Späteres Veröffentlichungsdatum festlegen</small>
    </span>
  </button>
</div>

Ausgewählt

.selected an einem .menu-item markiert die aktuelle Auswahl.

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">Status wählen</button>
<div class="menu">
  <button class="menu-item selected" type="button">
    <div class="menu-item-content">
      Ausgewählter Menüeintrag
      <small class="menu-item-description">Für Nutzer derzeit sichtbar</small>
    </div>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button">
    <div class="menu-item-content">
      Normaler Menüeintrag
      <small class="menu-item-description">Noch nicht veröffentlicht</small>
    </div>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
</div>

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">Status wählen</button>
<div class="menu">
  <button class="menu-item" type="button">
    Normaler Menüeintrag
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item selected" type="button">
    Ausgewählter Menüeintrag
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button">
    Normaler Menüeintrag
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
</div>

Menüinhalte

Überschriften

Mit einer Überschrift beschriftest du Abschnitte im Menü.

<div class="menu show position-static">
  <a class="menu-item" href="#">Aktion</a>
  <a class="menu-item" href="#">Aktion</a>
  <h6 class="menu-header">Menü-Überschrift</h6>
  <a class="menu-item" href="#">Weitere Aktion</a>
</div>

Trenner

Ein Trenner grenzt Gruppen zusammengehöriger Einträge voneinander ab.

<div class="menu show position-static">
  <a class="menu-item" href="#">Aktion</a>
  <a class="menu-item" href="#">Weitere Aktion</a>
  <a class="menu-item" href="#">Noch etwas anderes</a>
  <hr class="menu-divider">
  <a class="menu-item" href="#">Abgetrennter Link</a>
</div>

Text

Freien Text platzierst du mit den Utilities für Margin und Padding. Meist brauchst du zusätzlich eine Breitenangabe für das Menü.

<div class="menu show position-static p-3 fg-2"
     style="--bs-menu-min-width: 240px;">
  <p>
    Beispieltext, der frei im Menü fließt.
  </p>
  <p class="mb-0">
    Und hier noch etwas Beispieltext.
  </p>
</div>

Formulare

Ein Formular kann in einem Menü stehen oder selbst das Menü sein. Den nötigen Abstand regelst du mit den Utilities für Margin und Padding.

<div class="menu show position-static"
     style="--bs-menu-min-width: 300px;">
  <form class="d-flex flex-column gap-3 p-3">
    <div>
      <label for="exampleMenuFormEmail1" class="form-label">E-Mail-Adresse</label>
      <input type="email" class="form-control" id="exampleMenuFormEmail1" placeholder="email@beispiel.de">
    </div>
    <div>
      <label for="exampleMenuFormPassword1" class="form-label">Passwort</label>
      <input type="password" class="form-control" id="exampleMenuFormPassword1" placeholder="Passwort">
    </div>
    <div class="form-field">
      <input type="checkbox" id="checkLabel" class="check" />
      <label for="checkLabel">Beispiel-Checkbox</label>
    </div>
    <div class="vstack gap-2">
      <button type="submit" class="btn-solid theme-primary">Anmelden</button>
      <a class="theme-secondary" href="#">Neu hier? Registrieren</a>
      <a class="theme-secondary" href="#">Passwort vergessen?</a>
    </div>
  </form>
</div>

Scrollbare Menüs

Mit den Custom Properties --bs-menu-max-height und --bs-menu-overflow-y begrenzt du die Höhe und aktivierst das Scrollen.

<div class="menu show position-static" style="--bs-menu-max-height: 145px; --bs-menu-overflow-y: auto;">
  <button class="menu-item" type="button">Eintrag 1</button>
  <button class="menu-item" type="button">Eintrag 2</button>
  <button class="menu-item" type="button">Eintrag 3</button>
  <button class="menu-item" type="button">Eintrag 4</button>
  <button class="menu-item" type="button">Eintrag 5</button>
  <button class="menu-item" type="button">Eintrag 6</button>
  <button class="menu-item" type="button">Eintrag 7</button>
  <button class="menu-item" type="button">Eintrag 8</button>
</div>

Alternativ macht .menu-scrollable das Menü scrollbar. Die Klasse setzt eine meist unkritische Maximalhöhe von 80dvh und den Overflow gleich mit.

Untermenüs

Verschachtelte Menüs baust du mit der Wrapper-Klasse .submenu. Untermenüs öffnen per Hover oder Klick, lassen sich per Tastatur bedienen und positionieren sich passend zum Viewport. Auf kleinen Bildschirmen (unter 576px) legen sie sich über das Elternmenü und bekommen einen Zurück-Button, statt seitlich auszuklappen.

Setze dazu einen .menu-item als Auslöser und ein verschachteltes .menu in ein .submenu-Element.

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">
  Untermenüs
</button>
<div class="menu">
  <div class="submenu">
    <button class="menu-item" type="button">Datei</button>
    <div class="menu">
      <a class="menu-item" href="#">Neu</a>
      <a class="menu-item" href="#">Öffnen</a>
      <a class="menu-item" href="#">Speichern</a>
    </div>
  </div>
  <div class="submenu">
    <button class="menu-item" type="button">Bearbeiten</button>
    <div class="menu">
      <a class="menu-item" href="#">Ausschneiden</a>
      <a class="menu-item" href="#">Kopieren</a>
      <a class="menu-item" href="#">Einfügen</a>
    </div>
  </div>
  <div class="submenu">
    <button class="menu-item" type="button">Ansicht</button>
    <div class="menu">
      <a class="menu-item" href="#">Vergrößern</a>
      <a class="menu-item" href="#">Verkleinern</a>
    </div>
  </div>
  <hr class="menu-divider">
  <a class="menu-item" href="#">Einstellungen</a>
</div>

Mehrstufig

Untermenüs lassen sich über mehrere Ebenen verschachteln. Jede Ebene klappt seitlich auf und wechselt die Richtung, wenn der Platz im Viewport nicht reicht.

<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">
  Mehrstufiges Menü
</button>
<div class="menu">
  <a class="menu-item" href="#">Aktion Ebene 1</a>
  <div class="submenu">
    <button class="menu-item" type="button">Untermenü Ebene 1</button>
    <div class="menu">
      <a class="menu-item" href="#">Aktion Ebene 2</a>
      <div class="submenu">
        <button class="menu-item" type="button">Untermenü Ebene 2</button>
        <div class="menu">
          <a class="menu-item" href="#">Aktion Ebene 3 A</a>
          <a class="menu-item" href="#">Aktion Ebene 3 B</a>
        </div>
      </div>
      <a class="menu-item" href="#">Weitere Ebene 2</a>
    </div>
  </div>
  <a class="menu-item" href="#">Weitere Ebene 1</a>
</div>

Menü-Optionen

Mit data-bs-offset oder data-bs-reference verschiebst du das Menü. Der Offset ist der Abstand zum Auslöser in Pixeln, die Referenz das Element, an dem sich das Menü ausrichtet.

<div class="d-flex">
  <div class="me-1">
    <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" aria-expanded="false" data-bs-offset="10,20">
      Versatz
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Aktion</a>
      <a class="menu-item" href="#">Weitere Aktion</a>
      <a class="menu-item" href="#">Noch etwas anderes</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn-solid theme-secondary">Referenz</button>
    <button type="button" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" aria-expanded="false" data-bs-reference="parent">
      <svg class="bi" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708m0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"/></svg>
      <span class="visually-hidden">Menü umschalten</span>
    </button>
    <div class="menu">
      <a class="menu-item" href="#">Aktion</a>
      <a class="menu-item" href="#">Weitere Aktion</a>
      <a class="menu-item" href="#">Noch etwas anderes</a>
      <hr class="menu-divider">
      <a class="menu-item" href="#">Abgetrennter Link</a>
    </div>
  </div>
</div>

Automatisches Schließen

Standardmäßig schließt sich das Menü bei einem Klick innerhalb oder außerhalb. Mit der Option autoClose änderst du dieses Verhalten.

Unabhängig von autoClose schließt Esc das Menü, solange der Fokus im Menü (Auslöser oder Einträge) liegt, und setzt den Fokus zurück auf den Auslöser.

<div class="btn-group">
  <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-auto-close="true" aria-expanded="false">
    Standard-Menü
  </button>
  <div class="menu">
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
  </div>
</div>

<div class="btn-group">
  <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-auto-close="inside" aria-expanded="false">
    Innen klickbar
  </button>
  <div class="menu">
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
  </div>
</div>

<div class="btn-group">
  <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-auto-close="outside" aria-expanded="false">
    Außen klickbar
  </button>
  <div class="menu">
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
  </div>
</div>

<div class="btn-group">
  <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-auto-close="false" aria-expanded="false">
    Manuell schließen
  </button>
  <div class="menu">
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
    <a class="menu-item" href="#">Menüeintrag</a>
  </div>
</div>

Verwendung

Per Data-Attribut oder JavaScript blendet das Plugin Menüs ein und aus, indem es die Klasse .show am .menu umschaltet. data-bs-toggle="menu" wird auch zum anwendungsweiten Schließen offener Menüs genutzt – setze es daher immer.

Per Data-Attribute

Setze data-bs-toggle="menu" an einen Link oder Button, um ein Menü umzuschalten.

<button type="button" data-bs-toggle="menu" aria-expanded="false">
  Menu trigger
</button>
<div class="menu">
  ...
</div>

Per JavaScript

Menüs per JavaScript initialisieren:

const menuElementList = document.querySelectorAll('[data-bs-toggle="menu"]')
const menuList = [...menuElementList].map(menuToggleEl => new bootstrap.Menu(menuToggleEl))

Zum programmatischen Öffnen, Schließen oder Umschalten holst du dir die Instanz vom Auslöser (dem Element mit data-bs-toggle="menu") und rufst die passende Methode auf:

const menuToggleEl = document.querySelector('#myMenuToggle')
const menu = bootstrap.Menu.getOrCreateInstance(menuToggleEl)

menu.show()
menu.hide()
menu.toggle()

Abhängigkeit: Das Menu-Plugin benötigt Floating UI.

Optionen

Optionen übergibst du per Data-Attribut (data-bs- + Optionsname, z. B. data-bs-auto-close="inside") oder per JavaScript.

Funktion für floatingConfig

const menu = new bootstrap.Menu(element, {
  floatingConfig(defaultBsFloatingConfig) {
    // const newFloatingConfig = {...}
    // use defaultBsFloatingConfig if needed...
    // return newFloatingConfig
  }
})

Methoden

Events

Alle Menü-Events werden am Auslöser gefeuert und steigen dann auf – du kannst Listener also auch am Elternelement des .menu registrieren. hide.bs.menu und hidden.bs.menu haben die Eigenschaft clickEvent (nur bei ursprünglichem Event-Typ click) mit dem Klick-Event-Objekt.

const myMenu = document.getElementById('myMenu')
myMenu.addEventListener('show.bs.menu', event => {
  // do something...
})

CSS-Variablen und Sass-Tokens findest du in der Originaldokumentation. Hinweis: Menüeinträge nutzen mindestens eine Variable, die nicht am .menu gesetzt ist (--bs-menu-item-border-radius) – so kannst du einen eigenen Wert vorgeben, während Bootstrap sonst einen Fallback nutzt.

Der Standard WAI-ARIA kennt ein eigenes role="menu"-Widget. Das ist aber für anwendungsartige Menüs gedacht, die Aktionen auslösen, und darf nur Menüeinträge, Checkbox- und Radio-Einträge, Radio-Gruppen und Untermenüs enthalten.

Bootstrap-Menüs sind dagegen allgemein gehalten und können z. B. auch Suchfelder oder Login-Formulare enthalten. Deshalb setzt Bootstrap die für echte ARIA-Menüs nötigen role- und aria--Attribute nicht automatisch – die musst du bei Bedarf selbst ergänzen.

Ausnahme sind Untermenü-Auslöser: Jeder .submenu > .menu-item mit verschachteltem .menu bekommt automatisch aria-haspopup="true", und aria-expanded wird beim Öffnen und Schließen mitgeführt. Setze aria-expanded nur selbst, wenn ein Untermenü geöffnet starten soll.

Tastaturbedienung:

• ↓ / ↑: zum nächsten bzw. vorherigen Eintrag
• →: Untermenü öffnen (bei RTL ←)
• ←: Untermenü verlassen, zurück zum Elternmenü (bei RTL →)
• Enter / Leertaste: Eintrag auslösen oder Untermenü öffnen
• Esc: Menü schließen
• Pos1 / Ende: zum ersten bzw. letzten Eintrag
• Tab: Fokus weitergeben und Menü schließen