Navbar

In Bootstrap v6.0.0 neu aufgebaut

Flexible, responsive Navigationsleisten mit Marke, Navigation, Formularen und eingebautem Drawer für mobile Geräte.

Die Navbar wurde in Bootstrap 6 grundlegend überarbeitet: Statt Collapse nutzt sie für das mobile Menü jetzt die Drawer-Komponente auf Basis von <dialog>, und die Breakpoint-Klassen folgen der neuen Präfix-Syntax wie md:navbar-expand.

  • Grundgerüst: Eine .navbar mit .{breakpoint}:navbar-expand (z. B. .md:navbar-expand) für das responsive Einklappen, dazu Farbklassen.
  • Fluid: Navbar und Inhalt sind standardmäßig volle Breite – über den Container begrenzt du die Breite.
  • Utilities: Abstände und Ausrichtung steuerst du mit Margin-, Padding- und Flex-Utilities.
  • Drawer statt Collapse: Auf kleinen Bildschirmen gleiten die Links als Drawer von der Seite herein.
  • Landmark: Verwende <nav> oder bei einem <div> zusätzlich role="navigation".
  • Aktueller Eintrag: Kennzeichne ihn mit aria-current="page" bzw. aria-current="true".

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

Beispiel

Diese Navbar enthält fast alle unterstützten Bestandteile und einen responsiven Drawer von rechts, umgesetzt mit dem Drawer-Plugin. Verkleinere das Browserfenster, um das responsive Verhalten zu sehen.

<nav class="navbar md:navbar-expand bg-1">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDrawer" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarDrawer" aria-labelledby="navbarDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarDrawerLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body mb-2 md:mb-0">
        <ul class="nav navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Start</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <button class="nav-link" type="button" 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>
              <hr class="menu-divider">
              <a class="menu-item" href="#">Etwas anderes</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Deaktiviert</a>
          </li>
        </ul>
        <form class="hstack gap-2" role="search">
          <input class="form-control" type="search" placeholder="Suchen" aria-label="Suchen"/>
          <button class="btn-solid btn-icon theme-secondary" type="submit" aria-label="Suchen">
            <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
          </button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

Unterstützte Inhalte

Die Navbar bringt einige Unterkomponenten mit, die du nach Bedarf kombinierst:

  • .navbar-brand für Firmen-, Produkt- oder Projektnamen.
  • .navbar-nav für eine schlanke Navigation über die volle Höhe, inklusive Menüs.
  • .navbar-toggler zum Öffnen des Drawers und für weiteres responsives Verhalten.
  • Flex- und Abstands-Utilities für Formularelemente und Aktionen.
  • .navbar-text für vertikal zentrierte Textzeilen.

Marke

.navbar-brand funktioniert an den meisten Elementen, am besten aber an einem Link – andere Elemente brauchen eventuell zusätzliche Utilities.

Text

Setze deinen Text in ein Element mit .navbar-brand.

<!-- As a link -->
<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Bild

Statt Text kannst du ein <img> in .navbar-brand setzen.

<nav class="navbar bg-1 fg-2">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://getbootstrap.com/docs/6.0/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Bild und Text

Mit ein paar Utilities kombinierst du Bild und Text. Beachte .d-inline-block und .align-text-top am <img>.

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="https://getbootstrap.com/docs/6.0/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Navbar-Links bauen auf den .nav-Optionen auf, haben eine eigene Modifier-Klasse und brauchen die Toggler-Klassen für korrektes responsives Verhalten. Die Navigation nimmt so viel horizontalen Platz ein wie möglich, damit der Inhalt sauber ausgerichtet bleibt.

Markiere die aktuelle Seite mit .active am .nav-link und ergänze dort zusätzlich aria-current.

<nav class="navbar sm:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarNav" aria-labelledby="navbarNavLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarNavLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Start</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Funktionen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Preise</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Deaktiviert</a>
          </li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

Da Navs über Klassen gesteuert werden, kannst du auch ganz auf Listen verzichten.

<nav class="navbar sm:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarNavAltMarkup" aria-labelledby="navbarNavAltMarkupLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarNavAltMarkupLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <div class="nav nav-pills navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Start</a>
          <a class="nav-link" href="#">Funktionen</a>
          <a class="nav-link" href="#">Preise</a>
          <a class="nav-link disabled" aria-disabled="true">Deaktiviert</a>
        </div>
      </div>
    </dialog>
  </div>
</nav>

Auch Menüs sind möglich. Sie brauchen ein umschließendes Element zur Positionierung – verwende daher getrennte, verschachtelte Elemente für .nav-item und .nav-link.

<nav class="navbar lg:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNavMenu" aria-controls="navbarNavMenu" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarNavMenu" aria-labelledby="navbarNavMenuLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarNavMenuLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Start</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Funktionen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Preise</a>
          </li>
          <li class="nav-item">
            <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
              Menü-Link
            </button>
            <div class="menu">
              <a class="menu-item" href="#">Aktion</a>
              <a class="menu-item" href="#">Weitere Aktion</a>
              <a class="menu-item" href="#">Etwas anderes</a>
            </div>
          </li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

Formulare

Du kannst verschiedene Formularelemente und Komponenten in der Navbar platzieren.

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Suchen" aria-label="Suchen"/>
      <button class="btn-outline theme-success" type="submit">Suchen</button>
    </form>
  </div>
</nav>

Direkte Kindelemente der .navbar nutzen Flex-Layout mit justify-content: space-between. Mit weiteren Flex-Utilities passt du das an.

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Suchen" aria-label="Suchen"/>
      <button class="btn-outline theme-success" type="submit">Suchen</button>
    </form>
  </div>
</nav>

Auch Input-Groups funktionieren. Besteht die Navbar ganz oder größtenteils aus einem Formular, kannst du <form> direkt als Container nutzen.

<nav class="navbar bg-1 fg-2">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Benutzername" aria-label="Benutzername" aria-describedby="basic-addon1"/>
    </div>
  </form>
</nav>

Auch verschiedene Buttons sind möglich. Mit vertikalen Ausrichtungs-Utilities bringst du unterschiedlich große Elemente auf eine Linie.

<nav class="navbar bg-1 fg-2">
  <form class="container-fluid justify-content-start">
    <button class="btn-outline theme-success me-2" type="button">Haupt-Button</button>
    <button class="btn-outline theme-secondary btn-sm" type="button">Kleinerer Button</button>
  </form>
</nav>

Text

Mit .navbar-text fügst du Text ein, der vertikal und horizontal passend ausgerichtet wird.

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar-Text mit Inline-Element
    </span>
  </div>
</nav>

Kombiniere den Text nach Bedarf mit anderen Komponenten und Utilities.

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar mit Text</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarText" aria-labelledby="navbarTextLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTextLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2 md:mb-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Start</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Funktionen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Preise</a>
          </li>
        </ul>
        <span class="navbar-text">
          Navbar-Text mit Inline-Element
        </span>
      </div>
    </dialog>
  </div>
</nav>

Dunkle Navbar

Für eine dunkle Navbar setzt du data-bs-theme="dark" an das .navbar-Element.

<nav class="navbar md:navbar-expand bg-1" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Dunkle Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDarkDrawer" aria-controls="navbarDarkDrawer" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarDarkDrawer" aria-labelledby="navbarDarkDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarDarkDrawerLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body mb-2 md:mb-0">
        <ul class="nav navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Start</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <button class="nav-link" type="button" 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>
              <hr class="menu-divider">
              <a class="menu-item" href="#">Etwas anderes</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Deaktiviert</a>
          </li>
        </ul>
        <form class="hstack gap-2" role="search">
          <input class="form-control" type="search" placeholder="Suchen" aria-label="Suchen"/>
          <button class="btn-solid btn-icon theme-secondary" type="submit" aria-label="Suchen">
            <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
          </button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

Transluzente Navbar

Mit .navbar-translucent wird der Hintergrund weichgezeichnet und gesättigt. Das passt gut zu Navbars, die über Inhalten liegen, etwa fixierte oder sticky Navbars.

<nav class="navbar navbar-translucent md:navbar-expand" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Start</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Funktionen</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Preise</a>
      </li>
    </ul>
  </div>
</nav>

Farbschemata

Dank Sass und CSS-Variablen sind Navbar-Themes einfach umzusetzen. Standard ist die helle Navbar für helle Hintergründe. Für dunkle Hintergründe setzt du data-bs-theme="dark" an die .navbar und passt sie mit .bg-* und weiteren Utilities an.

<nav class="navbar" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar bg-primary" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar bg-1" data-bs-theme="light">
  <!-- Navbar content -->
</nav>

Container

Optional kannst du die Navbar in einen .container setzen, um sie auf der Seite zu zentrieren – ein innerer Container ist trotzdem nötig. Alternativ zentriert ein Container innerhalb der .navbar nur deren Inhalt, etwa bei einer fixierten oder statischen Navbar oben.

<div class="container">
  <nav class="navbar lg:navbar-expand bg-1 fg-2">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Mit den responsiven Containern legst du fest, wie breit der Navbar-Inhalt dargestellt wird.

<nav class="navbar lg:navbar-expand bg-1 fg-2">
  <div class="md:container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Platzierung

Mit den Position-Utilities platzierst du Navbars abseits des normalen Flusses: oben oder unten fixiert, oder oben bzw. unten „sticky“ – sie scrollen dann mit, bis sie den Rand erreichen, und bleiben dort stehen.

Fixierte Navbars nutzen position: fixed und sind damit aus dem normalen Dokumentfluss genommen. Damit nichts überdeckt wird, brauchst du eventuell eigenes CSS, z. B. ein padding-top am <body>.

Responsives Verhalten

Mit .navbar-toggler und den Klassen .{breakpoint}:navbar-expand (sm, md, lg, xl, 2xl) bestimmst du, ab wann der Inhalt inline statt im Drawer erscheint. Zusammen mit anderen Utilities blendest du einzelne Elemente gezielt ein oder aus.

Soll die Navbar nie einklappen, setze .lg:navbar-expand an die Navbar. Soll immer der Drawer genutzt werden, lässt du die Expand-Klasse ganz weg.

Drawer

Standardmäßig nutzen Navbars die Drawer-Komponente für ihr responsives Verhalten – ein modernes Seitenmenü, das von jeder Bildschirmseite hereingleiten kann.

Drawer-Platzierung

Von welcher Seite der Drawer kommt, legst du mit diesen Klassen fest:

  • .drawer-start – von links (bei RTL von rechts)
  • .drawer-end – von rechts (bei RTL von links)
  • .drawer-top – von oben
  • .drawer-bottom – von unten

Verkleinere das Fenster und klicke auf den Toggler, um den Drawer aus verschiedenen Richtungen hereingleiten zu sehen.

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Drawer links</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarLeftDrawer" aria-controls="navbarLeftDrawer" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-start" tabindex="-1" id="navbarLeftDrawer" aria-labelledby="navbarLeftDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarLeftDrawerLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2 md:mb-0">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Start</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Deaktiviert</a></li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>
<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Drawer oben</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTopDrawer" aria-controls="navbarTopDrawer" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-top" tabindex="-1" id="navbarTopDrawer" aria-labelledby="navbarTopDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTopDrawerLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2 md:mb-0">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Start</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Deaktiviert</a></li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

Toggler

Der Toggler steht standardmäßig links. Folgt er einem Geschwisterelement wie .navbar-brand, rückt er automatisch ganz nach rechts. Drehst du die Reihenfolge im Markup um, dreht sich auch die Position.

Ohne sichtbare .navbar-brand (die Marke steckt im Drawer):

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo01" aria-labelledby="navbarTogglerDemo01Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTogglerDemo01Label">Versteckte Marke</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <a class="navbar-brand" href="#">Versteckte Marke</a>
        <ul class="navbar-nav me-auto mb-2 md:mb-0">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Start</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Deaktiviert</a></li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Suchen" aria-label="Suchen"/>
          <button class="btn-outline theme-success" type="submit">Suchen</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

Marke links, Toggler rechts (ohne Expand-Klasse, also immer mit Drawer):

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo02" aria-labelledby="navbarTogglerDemo02Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTogglerDemo02Label">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Start</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Deaktiviert</a></li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Suchen" aria-label="Suchen"/>
          <button class="btn-outline theme-success" type="submit">Suchen</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

Toggler links, Marke rechts:

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo03" aria-labelledby="navbarTogglerDemo03Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTogglerDemo03Label">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Start</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Deaktiviert</a></li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Suchen" aria-label="Suchen"/>
          <button class="btn-outline theme-success" type="submit">Suchen</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

Externer Inhalt

Manchmal soll der Toggler einen Bereich öffnen, der außerhalb der .navbar im Markup steht. Da das Drawer-Plugin über id und data-bs-target verknüpft, ist das problemlos möglich.

Über den Navbar-Toggler umschaltbar.
<dialog class="drawer drawer-top" tabindex="-1" id="navbarToggleExternalContent" data-bs-theme="dark" aria-labelledby="navbarToggleExternalContentLabel">
  <div class="drawer-header">
    <h5 class="drawer-title" id="navbarToggleExternalContentLabel">Eingeklappter Inhalt</h5>
    <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Schließen"></button>
  </div>
  <div class="drawer-body">
    <span class="fg-2">Über den Navbar-Toggler umschaltbar.</span>
  </div>
</dialog>
<nav class="navbar bg-body" data-bs-theme="dark">
  <div class="container-fluid">
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Navigation umschalten">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
  </div>
</nav>

In diesem Fall solltest du per JavaScript den Fokus beim Öffnen in den Container verschieben. Sonst finden Tastatur- und Screenreader-Nutzer den neu eingeblendeten Inhalt nur schwer – vor allem, wenn er im Dokument vor dem Toggler steht. Achte außerdem darauf, dass der Toggler per aria-controls auf die id des Containers verweist. Theoretisch können Hilfstechnologien so direkt dorthin springen, die Unterstützung ist aber noch lückenhaft.

CSS-Variablen, Sass-Tokens, die Sass-Map $navbar-breakpoints und die Sass-Loops für die Expand-Klassen findest du in der Originaldokumentation.