in English

Navigationsleiste

Dokumentation und Beispiele für den leistungsstarken, reaktionsschnellen Navigations-Header von Bootstrap, die Navigationsleiste. Beinhaltet Unterstützung für Branding, Navigation und mehr, einschließlich Unterstützung für unser Kollaps-Plugin.

Auf dieser Seite

Wie es funktioniert

Folgendes müssen Sie wissen, bevor Sie mit der Navigationsleiste beginnen:

Navbars erfordern eine Umhüllung .navbarmit .navbar-expand{-sm|-md|-lg|-xl|-xxl}für ansprechende Minimierungs- und Farbschemaklassen .
Navbars und ihre Inhalte sind standardmäßig flüssig. Ändern Sie den Container , um seine horizontale Breite auf unterschiedliche Weise zu begrenzen.
Verwenden Sie unsere Spacing- und Flex -Utility-Klassen, um den Abstand und die Ausrichtung innerhalb der Navigationsleisten zu steuern.
Navbars reagieren standardmäßig, aber Sie können sie einfach ändern, um dies zu ändern. Das Antwortverhalten hängt von unserem Collapse-JavaScript-Plugin ab.
Stellen Sie die Zugänglichkeit sicher, indem Sie ein <nav>Element verwenden, oder, wenn Sie ein allgemeineres Element wie ein verwenden <div>, fügen role="navigation"Sie jeder Navigationsleiste ein hinzu, um sie explizit als Orientierungspunkt für Benutzer von Hilfstechnologien zu kennzeichnen.
Geben Sie das aktuelle Element an, indem Sie aria-current="page"für die aktuelle Seite oder aria-current="true"für das aktuelle Element in einem Satz verwenden.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Unterstützte Inhalte

Navbars verfügen über eine integrierte Unterstützung für eine Handvoll Unterkomponenten. Wählen Sie je nach Bedarf aus:

.navbar-brandfür Ihren Firmen-, Produkt- oder Projektnamen.
.navbar-navfür eine Navigation in voller Höhe und leichtgewichtig (einschließlich Unterstützung für Dropdowns).
.navbar-togglerzur Verwendung mit unserem Minimierungs-Plug-in und anderen Verhaltensweisen zum Umschalten der Navigation .
Flex- und Spacing-Dienstprogramme für alle Formularsteuerelemente und -aktionen.
.navbar-textzum Hinzufügen von vertikal zentrierten Textfolgen.
.collapse.navbar-collapsezum Gruppieren und Ausblenden von Navigationsleisteninhalten nach einem übergeordneten Haltepunkt.
Fügen Sie optional hinzu .navbar-scroll, um einen erweiterten Navigationsleisteninhalt festzulegen max-heightund zu scrollen .

Hier ist ein Beispiel aller Unterkomponenten, die in einer responsiven Navigationsleiste mit Lichtdesign enthalten sind, die automatisch am lg(großen) Haltepunkt eingeklappt wird.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

In diesem Beispiel werden die Utility-Klassen background ( bg-light) und spaced ( my-2, my-lg-0, me-sm-0, ) verwendet.my-sm-0

Marke

Das .navbar-brandkann auf die meisten Elemente angewendet werden, aber ein Anker funktioniert am besten, da einige Elemente möglicherweise Hilfsklassen oder benutzerdefinierte Stile erfordern.

Text

Fügen Sie Ihren Text innerhalb eines Elements mit der .navbar-brandKlasse hinzu.

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

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

Bild

Sie können den Text innerhalb von .navbar-branddurch ein ersetzen <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Bild und Text

Sie können auch einige zusätzliche Dienstprogramme verwenden, um gleichzeitig ein Bild und Text hinzuzufügen. Beachten Sie die Hinzufügung von .d-inline-blockund .align-text-topauf der <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

Navbar-Navigationslinks bauen auf unseren .navOptionen mit ihrer eigenen Modifikatorklasse auf und erfordern die Verwendung von Toggler-Klassen für das richtige Responsive-Styling. Die Navigation in Navbars wird auch wachsen, um so viel horizontalen Platz wie möglich einzunehmen, damit Ihre Navbar-Inhalte sicher ausgerichtet bleiben.

Fügen Sie die .activeKlasse hinzu .nav-link, um die aktuelle Seite anzugeben.

Bitte beachten Sie, dass Sie das aria-currentAttribut auch zum active hinzufügen sollten .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Und da wir Klassen für unsere Navs verwenden, können Sie den listenbasierten Ansatz ganz vermeiden, wenn Sie möchten.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Sie können auch Dropdowns in Ihrer Navigationsleiste verwenden. Dropdown-Menüs erfordern ein Wrapping-Element für die Positionierung, verwenden Sie also unbedingt separate und verschachtelte Elemente für .nav-itemund .nav-linkwie unten gezeigt.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Formen

Platzieren Sie verschiedene Formularsteuerelemente und Komponenten in einer Navigationsleiste:

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

Unmittelbar untergeordnete Elemente von .navbarverwenden Flex-Layout und sind standardmäßig justify-content: space-between. Verwenden Sie nach Bedarf zusätzliche Flex-Dienstprogramme , um dieses Verhalten anzupassen.

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

Eingangsgruppen funktionieren auch. Wenn Ihre Navigationsleiste ein ganzes Formular oder hauptsächlich ein Formular ist, können Sie das <form>Element als Container verwenden und etwas HTML sparen.

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

Als Teil dieser Navigationsleistenformulare werden auch verschiedene Schaltflächen unterstützt. Dies ist auch eine großartige Erinnerung daran, dass Dienstprogramme für die vertikale Ausrichtung verwendet werden können, um Elemente unterschiedlicher Größe auszurichten.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Text

Navigationsleisten können mit Hilfe von Textschnipsel enthalten .navbar-text. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textzeichenfolgen an.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Mischen und kombinieren Sie es nach Bedarf mit anderen Komponenten und Dienstprogrammen.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Farbschemata

Dank der Kombination von Designklassen und background-colorDienstprogrammen war die Gestaltung der Navigationsleiste noch nie so einfach. Wählen Sie aus .navbar-lightfür die Verwendung mit hellen Hintergrundfarben oder .navbar-darkfür dunkle Hintergrundfarben. Passen Sie dann mit .bg-*Dienstprogrammen an.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

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

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Behälter

Obwohl dies nicht erforderlich ist, können Sie eine Navigationsleiste in ein einschließen .container, um sie auf einer Seite zu zentrieren – beachten Sie jedoch, dass ein innerer Container weiterhin erforderlich ist. Oder Sie können einen Container in hinzufügen .navbar, um nur den Inhalt einer festen oder statischen oberen Navigationsleiste zu zentrieren .

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

Verwenden Sie einen der responsiven Container, um zu ändern, wie breit der Inhalt in Ihrer Navigationsleiste angezeigt wird.

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

Platzierung

Verwenden Sie unsere Positionsdienstprogramme , um Navigationsleisten an nicht statischen Positionen zu platzieren. Wählen Sie „oben fixiert“, „unten fixiert“ oder „oben fixiert“ (scrollt mit der Seite, bis sie ganz oben ist, und bleibt dann dort). Feste Navigationsleisten verwenden position: fixed, was bedeutet, dass sie aus dem normalen Fluss des DOM gezogen werden und möglicherweise benutzerdefiniertes CSS (z. B. padding-topauf dem <body>) erfordern, um Überschneidungen mit anderen Elementen zu vermeiden.

Beachten Sie auch, dass .sticky-topverwendet position: stickywird, was nicht von jedem Browser vollständig unterstützt wird .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Scrollen

.navbar-nav-scrollZu einer .navbar-nav(oder einer anderen Navigationsleisten-Unterkomponente) hinzufügen, um vertikales Scrollen innerhalb des umschaltbaren Inhalts einer reduzierten Navigationsleiste zu ermöglichen . Standardmäßig setzt das Scrollen bei 75vh(oder 75 % der Höhe des Darstellungsbereichs) ein, aber Sie können dies mit der lokalen benutzerdefinierten CSS-Eigenschaft --bs-navbar-heightoder benutzerdefinierten Stilen überschreiben. Bei größeren Ansichtsfenstern wird der Inhalt bei erweiterter Navigationsleiste wie in einer Standard-Navigationsleiste angezeigt.

Bitte beachten Sie, dass dieses Verhalten mit einem potenziellen Nachteil overfloweinhergeht, dass die Einstellung —when overflow-y: auto(erforderlich, um den Inhalt hier zu scrollen) overflow-xdas Äquivalent von autoist, wodurch einige horizontale Inhalte abgeschnitten werden.

Hier ist eine Beispiel-Navigationsleiste mit .navbar-nav-scrollwith style="--bs-scroll-height: 100px;", mit einigen zusätzlichen Randdienstprogrammen für optimale Abstände.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Ansprechende Verhaltensweisen

Navigationsleisten können .navbar-toggler, .navbar-collapseund .navbar-expand{-sm|-md|-lg|-xl|-xxl}Klassen verwenden, um zu bestimmen, wann ihr Inhalt hinter einer Schaltfläche ausgeblendet wird. In Kombination mit anderen Dienstprogrammen können Sie ganz einfach auswählen, wann bestimmte Elemente angezeigt oder ausgeblendet werden sollen.

Fügen Sie für Navigationsleisten, die niemals einklappen, die .navbar-expandKlasse zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer einklappen, keine .navbar-expandKlasse hinzu.

Umschalter

Navbar Toggler sind standardmäßig linksbündig, aber wenn sie einem gleichgeordneten Element wie einem folgen .navbar-brand, werden sie automatisch ganz rechts ausgerichtet. Wenn Sie Ihr Markup umkehren, wird die Platzierung des Umschalters umgekehrt. Nachfolgend finden Sie Beispiele für verschiedene Umschaltstile.

Mit nein .navbar-brandam kleinsten Haltepunkt:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Mit einem Markennamen auf der linken Seite und einem Umschalter auf der rechten Seite:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Mit Umschalter links und Markenname rechts:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Externe Inhalte

Manchmal möchten Sie das Minimierungs-Plugin verwenden, um ein Containerelement für Inhalte auszulösen, die sich strukturell außerhalb der .navbar. Da unser Plugin auf dem idund dem data-bs-targetMatching funktioniert, ist das ganz einfach!

Collapsed content

Toggleable via the navbar brand.

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Wenn Sie dies tun, empfehlen wir, zusätzliches JavaScript einzuschließen, um den Fokus programmgesteuert auf den Container zu verschieben, wenn er geöffnet wird. Andernfalls wird es für Tastaturbenutzer und Benutzer von Hilfstechnologien wahrscheinlich schwierig sein, die neu aufgedeckten Inhalte zu finden – insbesondere, wenn der geöffnete Container in der Struktur des Dokuments vor dem Umschalter steht. Wir empfehlen außerdem sicherzustellen, dass der Toggler das aria-controlsAttribut hat, das auf den Inhaltscontainer zeigt id. Theoretisch ermöglicht dies Benutzern von Hilfstechnologien, direkt vom Umschalter zu dem Container zu springen, den er steuert – aber die Unterstützung dafür ist derzeit ziemlich lückenhaft.

Leinwand

Verwandeln Sie Ihre ein- und ausklappbare Navigationsleiste mit dem Offcanvas-Plugin in eine Offcanvas-Schublade. Wir erweitern beide Offcanvas-Standardstile und verwenden unsere .navbar-expand-*Klassen, um eine dynamische und flexible Navigationsseitenleiste zu erstellen.

Um im folgenden Beispiel eine Offcanvas-Navigationsleiste zu erstellen, die immer über alle Haltepunkte hinweg reduziert ist, lassen Sie die .navbar-expand-*Klasse vollständig weg.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Um eine Offcanvas-Navigationsleiste zu erstellen, die an einem bestimmten Haltepunkt wie z. B. in eine normale Navigationsleiste erweitert wird lg, verwenden Sie .navbar-expand-lg.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass

Variablen

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Schleife

Responsive Navbar-Expand/Collapse-Klassen (z. B. .navbar-expand-lg) werden mit der $breakpointsKarte kombiniert und durch eine Schleife in generiert scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}