Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Navbar

Dokumentatioun an Beispiller fir Bootstrap's mächtege, reaktiounsfäeger Navigatiounsheader, d'Navbar. Ëmfaasst Ënnerstëtzung fir Branding, Navigatioun, a méi, dorënner Ënnerstëtzung fir eise Zesummebroch Plugin.

Op dëser Säit

Wéi et funktionnéiert

Hei ass wat Dir wësse musst ier Dir mat der Navbar ufänkt:

  • Navbars verlaangen eng wrapping .navbarmat .navbar-expand{-sm|-md|-lg|-xl|-xxl}fir reaktiounsfäeger Zesummebroch an Faarf Schema Klassen.
  • Navbars an hiren Inhalt si flësseg par défaut. Ännert de Container fir hir horizontale Breet op verschidde Weeër ze limitéieren.
  • Benotzt eis Abstands- a Flex- Utility-Klassen fir Abstand an Ausriichtung bannent Navbars ze kontrolléieren.
  • Navbars reaktiounsfäeger par défaut, awer Dir kënnt se einfach änneren fir dat z'änneren. Responsabel Verhalen hänkt vun eisem Collapse JavaScript Plugin of.
  • Vergewëssert Iech Accessibilitéit andeems Dir en <nav>Element benotzt oder, wann Dir e méi generescht Element benotzt wéi e <div>, füügt eng role="navigation"un all Navbar fir et explizit als Landmarkregioun fir Benotzer vun Hëllefstechnologien z'identifizéieren.
  • Gitt den aktuellen Element un andeems Dir aria-current="page"fir déi aktuell Säit oder aria-current="true"fir den aktuellen Element an engem Set benotzt.
  • Nei am v5.2.0: Navbars kënne mat CSS Variabelen thematiséiert ginn, déi op d' .navbarBasisklass scoped sinn. .navbar-lightgouf ofgeschaaft a .navbar-darkgouf nei geschriwwe fir CSS Variablen ze iwwerschreiden anstatt zousätzlech Stiler ze addéieren.
Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Ënnerstëtzt Inhalt

Navbars kommen mat agebauter Ënnerstëtzung fir eng Handvoll Ënnerkomponenten. Wielt aus de folgende wéi néideg:

  • .navbar-brandfir Är Firma, Produkt oder Projet Numm.
  • .navbar-navfir eng voll Héicht a liicht Navigatioun (inklusiv Ënnerstëtzung fir Dropdowns).
  • .navbar-togglerfir ze benotzen mat eisem Zesummebroch Plugin an aner Navigatioun toggling Behuelen.
  • Flex an Ofstand Utilities fir all Form Kontrollen an Aktiounen.
  • .navbar-textfir vertikal zentréiert Strings vum Text ze addéieren.
  • .collapse.navbar-collapsefir Gruppéierung an Verstoppen navbar Inhalt vun engem Elterendeel breakpoint.
  • Füügt eng fakultativ fir en erweiderten Navbar Inhalt.navbar-scroll ze setzen max-heighta scrollen .

Hei ass e Beispill vun all Ënnerkomponenten, déi an enger reaktiounsfäeger liichtthematescher Navbar abegraff sinn, déi automatesch um lg(grousse) Breakpunkt zesummeklappen.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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>

Dëst Beispill benotzt Hannergrond ( bg-light) an Abstand ( me-auto, mb-2, mb-lg-0, me-2) Utility Klassen.

Mark

Dee .navbar-brandkann op déi meescht Elementer applizéiert ginn, awer en Anker funktionnéiert am Beschten, well e puer Elementer Utilityklassen oder personaliséiert Stiler erfuerderen.

Text

Füügt Ären Text an engem Element mat der .navbar-brandKlass.

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

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

Bild

Dir kënnt den Text bannent der .navbar-brandmat engem ersetzen <img>.

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

Bild an Text

Dir kënnt och e puer zousätzlech Utilities benotzen fir e Bild an Text zur selwechter Zäit ze addéieren. Notéiert d'Zousatz vun .d-inline-blockan .align-text-topop der <img>.

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

Navbar Navigatioun Linken bauen op eis .navOptiounen mat hirer eegener Modifikateur Klass a verlaangen d'Benotzung vun Toggler Klassen fir richteg reaktiounsfäeger Styling. Navigatioun an Navbars wäert och wuessen fir sou vill horizontal Plaz wéi méiglech ze besetzen fir Ären Navbar Inhalt sécher ausgeriicht ze halen.

Füügt d' .activeKlass un .nav-linkfir déi aktuell Säit unzeginn.

Notéiert w.e.g. datt Dir och den aria-currentAttribut op den aktiven .nav-link.

html 
<nav class="navbar navbar-expand-lg 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>

A well mir Klassen fir eis Navs benotzen, kënnt Dir d'Lëscht-baséiert Approche ganz vermeiden wann Dir wëllt.

html 
<nav class="navbar navbar-expand-lg 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>

Dir kënnt och Dropdowns an Ärer Navbar benotzen. Dropdown-Menüen erfuerderen e Wrapping-Element fir d'Positionéierung, also gitt sécher datt Dir getrennt an nestet Elementer benotzt fir .nav-itema .nav-linkwéi hei ënnendrënner.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <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

Place verschidde Form Kontrollen a Komponente bannent enger Navbar:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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>

Direkt Kand Elementer vun .navbarbenotzen flex Layout a wäert Standard op justify-content: space-between. Benotzt zousätzlech Flex Utilities wéi néideg fir dëst Verhalen unzepassen.

html 
<nav class="navbar bg-light">
  <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="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Input Gruppen Aarbecht, ze. Wann Är Navbar eng ganz Form ass, oder meeschtens eng Form, kënnt Dir d' <form>Element als Container benotzen an HTML späicheren.

html 
<nav class="navbar 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>

Verschidde Knäppercher ginn och als Deel vun dësen Navbar Formen ënnerstëtzt. Dëst ass och eng super Erënnerung datt vertikal Ausrichtung Utilities kënne benotzt ginn fir Elementer vu verschiddene Gréissten auszegläichen.

html 
<nav class="navbar 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

Navbars kënne Stécker vum Text mat der Hëllef vun .navbar-text. Dës Klass passt d'Vertikal Ausrichtung an d'horizontale Abstand fir Textsträicher un.

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

Mix a passt mat anere Komponenten an Utilities wéi néideg.

html 
<nav class="navbar navbar-expand-lg 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>

Faarf Schemaen

Nei am v5.2.0: Navbar Thema gëtt elo vun CSS Variablen ugedriwwen a .navbar-lightgouf ofgeschaaft. CSS Variablen ginn op ugewannt .navbar, Standard op d'"Liicht" Erscheinung, a kënne mat iwwerschriwwe ginn .navbar-dark.

Navbar Themen si méi einfach wéi jee dank der Bootstrap Kombinatioun vu Sass an CSS Variablen. De Standard ass eis "Liicht Navbar" fir mat helle Hannergrondfaarwen ze benotzen, awer Dir kënnt och .navbar-darkfir donkel Hannergrondfaarwen ufroen. Dann, personaliséiere mat .bg-*Utilities.

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

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

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

Container

Och wann et net erfuerderlech ass, kënnt Dir eng Navbar an engem wéckelen .containerfir se op enger Säit ze zentréieren - awer bemierkt datt en banneschten Container nach ëmmer erfuerderlech ass. Oder Dir kënnt e Container bannen derbäisetzen .navbarfir nëmmen den Inhalt vun enger fixer oder statescher Top Navbar ze zentréieren .

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

Benotzt ee vun de reaktiounsfäeger Container fir ze änneren wéi breet den Inhalt an Ärer Navbar presentéiert gëtt.

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

Placement

Benotzt eis Positiouns Utilities fir Navbars an net-statesch Positiounen ze placéieren. Wielt tëscht fixéiert no uewen, fixéiert no ënnen, eropgeknäppt (scrollt mat der Säit bis se uewen erreecht, da bleift do), oder gekollt no ënnen (scrollt mat der Säit bis se ënnen erreecht, da bleift do).

Fixed Navbars benotzen position: fixed, dat heescht datt se aus dem normale Floss vun der DOM gezunn sinn a kënnen personaliséiert CSS erfuerderen (zB padding-topop der <body>) fir Iwwerlappung mat aneren Elementer ze vermeiden.

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

Scrollen

Füügt .navbar-nav-scrollun eng .navbar-nav(oder aner Navbar Ënnerkomponent) fir vertikal Scrollen am toggleablen Inhalt vun enger zesummegeklappt Navbar z'erméiglechen. Par défaut geet d'Scrolling an 75vh(oder 75% vun der Viewport Héicht), awer Dir kënnt dat iwwerschreiden mat der lokaler CSS personaliséierter Eegeschafte --bs-navbar-heightoder personaliséierte Stiler. Bei gréissere Viewports wann d'Navbar erweidert gëtt, erschéngt Inhalt wéi et an enger Standardnavbar ass.

Notéiert w.e.g. datt dëst Verhalen mat engem potenziellen Nodeel kënnt vun overflow-wann Astellung overflow-y: auto(erfuerderlech fir den Inhalt hei ze scrollen), overflow-xass d'Äquivalent vun auto, wat e puer horizontalen Inhalter cropt.

Hei ass e Beispill Navbar benotzt .navbar-nav-scrollmat style="--bs-scroll-height: 100px;", mat e puer extra Margin Utilities fir optimal Abstand.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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>

Reaktiounsfäeger Verhalen

Navbars kënnen .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl|-xxl}Klassen benotzen fir ze bestëmmen wann hiren Inhalt hannert engem Knäppchen zesummeklappt. A Kombinatioun mat aneren Utilities kënnt Dir ganz einfach wielen wéini Dir speziell Elementer ze weisen oder verstoppt.

Fir Navbaren déi ni zesummeklappen, füügt d' .navbar-expandKlass op der Navbar derbäi. Fir Navbars déi ëmmer zesummeklappen, füügt keng .navbar-expandKlass un.

Toggler

Navbar Togglers sinn par défaut lénks ausgeriicht, awer sollten se e Geschwësterelement wéi e verfollegen .navbar-brand, gi se automatesch no riets ausgeriicht. Ëmgekéiert Är Markup wäert d'Placement vum Toggler ëmgedréint ginn. Drënner sinn Beispiller vu verschiddene Toggle Stiler.

Mat kee .navbar-brandgewisen am klengste Breakpunkt:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

Mat engem Markennumm lénks gewisen an Toggler op der rietser Säit:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

Mat engem Toggler op der lénker Säit a Markennumm op der rietser Säit:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

Extern Inhalt

Heiansdo wëllt Dir den Zesummebroch Plugin benotzen fir e Containerelement fir Inhalter auszeléisen deen strukturell ausserhalb vun der .navbar. Well eise Plugin funktionnéiert op der ida data-bs-targetpassend, dat ass einfach gemaach!

html 
<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>

Wann Dir dëst maacht, empfeelen mir zousätzlech JavaScript abegraff fir de Fokus programmatesch op de Container ze réckelen wann et opgemaach gëtt. Soss wäerten d'Tastaturbenotzer an d'Benotzer vun Assistenztechnologien et méiglecherweis schwéier hunn den nei opgedeckten Inhalt ze fannen - besonnesch wann de Container, deen opgemaach gouf, virum Toggler an der Struktur vum Dokument kënnt. Mir recommandéieren och sécherzestellen datt den Toggler den aria-controlsAttribut huet, weist op idden Inhaltsbehälter. An der Theorie erlaabt dëst Hëllefstechnologie Benotzer direkt vum Toggler an de Container ze sprangen deen et kontrolléiert - awer d'Ënnerstëtzung fir dëst ass de Moment zimlech flësseg.

Offcanvas

Transforméiert Är erweidert a kollapsend Navbar an en Offcanvas Tirang mat der Offcanvas Komponent . Mir verlängeren béid Offcanvas Standardstiler a benotzen eis .navbar-expand-*Klassen fir eng dynamesch a flexibel Navigatiounssidebar ze kreéieren.

Am Beispill hei drënner, fir eng Offcanvas Navbar ze kreéieren déi ëmmer iwwer all Breakpoints zesummegeklappt ass, loosst d' .navbar-expand-*Klass komplett aus.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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" role="search">
          <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>

Fir eng Offcanvas Navbar ze kreéieren déi an eng normal Navbar op engem spezifesche Breakpunkt erweidert wéi lg, benotzt .navbar-expand-lg.

<nav class="navbar 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>

Wann Dir Offcanvas an enger donkeler Navbar benotzt, sollt Dir bewosst sinn datt Dir vläicht en donkelen Hannergrond um Offcanvas Inhalt muss hunn fir ze vermeiden datt den Text illiesbar gëtt. Am Beispill hei drënner addéiere mir .navbar-darkan .bg-darkden .navbar, .text-bg-darkzu .offcanvas, .dropdown-menu-darkzu .dropdown-menu, an .btn-close-whitefir .btn-closerichteg Styling mat engem donkelen Offcanvas.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, benotzen Navbars elo lokal CSS Variablen op .navbarfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

E puer zousätzlech CSS Variablen sinn och präsent op .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Personnalisatioun duerch CSS Variablen kann op der .navbar-darkKlass gesi ginn, wou mir spezifesch Wäerter iwwerschreiden ouni duplizéiert CSS Selektorer ze addéieren.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass Variablen

Variablen fir all Navbars:

$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-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;

Variablen fir déi donkel Navbar :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass Loop

Reaktiounsfäeger navbar expandéieren / Zesummebroch Klassen (zB, .navbar-expand-lg) si mat der Kaart kombinéiert $breakpointsan duerch eng Loop generéiert an 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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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