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.

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.

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

Dëst Beispill benotzt Hannergrond ( bg-light) an Abstand ( my-2, my-lg-0, me-sm-0, my-sm-0) 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.

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

Dir kënnt den Text bannent der .navbar-brandmat engem 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 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'Zousätzlech vun .d-inline-blockan .align-text-topop 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 Navigatiounslinks bauen op eis .navOptiounen mat hirer eegener Modifikateur Klass a verlaangen d'Benotzung vun Toggler Klassen fir e richtege 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.

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

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

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

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.

<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

Place verschidde Form Kontrollen a Komponente bannent enger Navbar:

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

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.

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

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.

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

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.

<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

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.

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

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

Faarf Schemaen

Themen vun der Navbar war ni méi einfach dank der Kombinatioun vun Themeklassen an background-colorUtilities. Wielt aus .navbar-lightfir ze benotzen mat hellem Hannergrondfaarwen, oder .navbar-darkfir donkel Hannergrondfaarwen. 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 navbar-light" 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 .

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

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

<nav class="navbar navbar-expand-lg navbar-light 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 oder eropgeknäppt (scrollt mat der Säit bis se uewen 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.

Notéiert och datt .sticky-topbenotzt position: sticky, déi net voll an all Browser ënnerstëtzt gëtt .

<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

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 Inhalt cropt.

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

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

Reaktiounsfäeger Verhalen

Navbars kënne benotzen .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl|-xxl}Klassen 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 Navbars déi ni zesummeklappen, füügt d' .navbar-expandKlass op der Navbar. 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 um klengste Breakpunkt:

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

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

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

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

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

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!

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>

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 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 mam Offcanvas Plugin. 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.

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

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

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