Beispiel: Bootstrap Nav

Hier findest Du ein sehr einfaches Beispiel für eine Navigationsleiste Bootstrap 5.

nav ist die Hauptklasse für die Navigationsleiste
navbar-expand-lg sorgt dafür, dass die Navigationsleiste auf großen Geräten ausgeklappt ist
navbar-light und bg-light sind Stiloptionen für das Aussehen der Navigationsleiste
Der Navigationsschalter wird durch einen Button mit navbar-toggler und data-toggle="collapse" definiert
Die Navigationslinks werden in einer ul-Liste mit der Klasse navbar-nav definiert
Jeder Navigationslink wird als li-Element mit der Klasse nav-item definiert
Die eigentlichen Links werden durch a-Elemente mit der Klasse nav-link definiert

Das ist es! Mit diesem einfachen Code hast du eine funktionierende Navigationsleiste mit Bootstrap 5.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Meine Marke</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Startseite <span class="sr-only">(aktuell)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Preise</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>