Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Navibar

Bootstrapi võimsa ja tundliku navigeerimispäise, navigeerimisriba dokumentatsioon ja näited. Sisaldab brändingu, navigeerimise ja muu tuge, sealhulgas meie ahendamise pistikprogrammi tuge.

Sellel lehel

Kuidas see töötab

Enne navigeerimisriba kasutamist peate teadma järgmist.

  • Naviribad vajavad tundliku kokkuvarisemise ja värviskeemi klasside .navbarjaoks mähkimist..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbarid ja nende sisu on vaikimisi sujuvad. Muutke konteinerit , et piirata nende horisontaalset laiust erineval viisil.
  • Kasutage meie vahekauguse ja paindlikkuse klasse, et juhtida navigeerimisribade vahekaugust ja joondust.
  • Navigeerimisribad reageerivad vaikimisi, kuid saate neid hõlpsalt muuta, et seda muuta. Reageerimiskäitumine sõltub meie Collapse JavaScripti pistikprogrammist.
  • Tagage juurdepääsetavus, kasutades <nav>elementi või kui kasutate üldisemat elementi (nt ) <div>, lisage role="navigation"igale navigeerimisribale, et see oleks abitehnoloogiate kasutajate jaoks maamärk.
  • Märkige praegune üksus, kasutades aria-current="page"praeguse lehe või aria-current="true"komplekti praeguse üksuse jaoks nuppu.
Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Toetatud sisu

Naviribadel on sisseehitatud tugi käputäie alamkomponentide jaoks. Valige vastavalt vajadusele järgmiste valikute hulgast.

  • .navbar-brandteie ettevõtte, toote või projekti nime jaoks.
  • .navbar-navtäiskõrguse ja kerge navigatsiooni jaoks (sh rippmenüüde tugi).
  • .navbar-togglerkasutamiseks koos meie ahendamise pistikprogrammi ja muude navigeerimise ümberlülitustoimingutega .
  • Paind- ja vaheutiliidid mis tahes vormi juhtelementide ja toimingute jaoks.
  • .navbar-textvertikaalselt tsentreeritud tekstistringide lisamiseks.
  • .collapse.navbar-collapsenavigeerimisriba sisu grupeerimiseks ja peitmiseks vanema murdepunkti järgi.
  • Lisage valikuline laiendatud navigeerimisriba sisu.navbar-scroll määramiseks max-heightja kerimiseks .

Siin on näide kõigist alamkomponentidest, mis sisalduvad tundlikule valgusteemalisele navigeerimisribale, mis lg(suurel) katkestuspunktil automaatselt kokku vajub.

<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" href="#" tabindex="-1" aria-disabled="true">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>

See näide kasutab tausta ( bg-light) ja vahe ( my-2, my-lg-0, me-sm-0, my-sm-0) utiliidi klasse.

Bränd

Seda .navbar-brandsaab rakendada enamikule elementidele, kuid ankur töötab kõige paremini, kuna mõned elemendid võivad vajada utiliidiklasse või kohandatud stiile.

Tekst

.navbar-brandLisage oma tekst klassiga elemendi sisse .

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

Pilt

Saate asendada teksti sees .navbar-brandmärgiga <img>.

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

Pilt ja tekst

Pildi ja teksti samaaegseks lisamiseks saate kasutada ka mõningaid täiendavaid utiliite. Pange tähele .d-inline-blockja .align-text-toplisamist <img>.

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

Navibari navigeerimislingid põhinevad meie .navvalikutel oma modifikaatoriklassiga ja nõuavad õigeks reageerivaks stiiliks lülitusklasside kasutamist. Navigeerimisribadel navigeerimine kasvab ka nii, et see hõivaks võimalikult palju horisontaalset ruumi, et navigeerimisriba sisu oleks kindlalt joondatud.

Lisage .activeklass .nav-linkpraeguse lehe näitamiseks.

Pange tähele, et aria-currentatribuut tuleks lisada ka aktiivsele .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ja kuna me kasutame oma navide jaoks klasse, saate soovi korral loendipõhist lähenemist täielikult vältida.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Võite kasutada ka navigeerimisriba rippmenüüd. Rippmenüüd nõuavad positsioneerimiseks ümbriselementi, seega kasutage kindlasti eraldi ja pesastatud elemente, .nav-itemnagu .nav-linkallpool näidatud.

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

Vormid

Asetage navigeerimisribale erinevad vormi juhtelemendid ja komponendid:

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

Kasutamise kohesed .navbaralamelemendid painduvad ja vaikimisi on justify-content: space-between. Selle käitumise kohandamiseks kasutage vajadusel täiendavaid paindlikke utiliite .

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

Töötavad ka sisestusrühmad. Kui teie navigeerimisriba on terve vorm või enamasti vorm, saate seda <form>elementi kasutada konteinerina ja salvestada veidi HTML-i.

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

Nende navigeerimisriba vormide osana toetatakse ka mitmesuguseid nuppe. See on ka suurepärane meeldetuletus, et vertikaalse joonduse utiliite saab kasutada erineva suurusega elementide joondamiseks.

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

Tekst

Naviribad võivad sisaldada tekstiosasid .navbar-text. See klass reguleerib tekstistringide vertikaalset joondust ja horisontaalset vahekaugust.

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

Segage ja sobitage vastavalt vajadusele teiste komponentide ja utiliitidega.

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

Värvilahendused

Navigeerimisriba teemastamine pole kunagi olnud lihtsam tänu teemaklasside ja background-colorutiliitide kombinatsioonile. Valige .navbar-lightheledate taustavärvidega või .navbar-darktumedate taustavärvidega kasutamiseks. Seejärel kohandage .bg-*utiliitidega.

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

Konteinerid

Kuigi see pole nõutav, saate navigeerimisriba mähkida a .container-sse, et see lehe keskele asetada, kuid pange tähele, et sisemine konteiner on siiski vajalik. Või võite lisada konteineri sisse, .navbaret tsentreerida ainult fikseeritud või staatilise ülemise navigeerimisriba sisu .

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

Kasutage mis tahes reageerivat konteinerit, et muuta navigeerimisriba sisu kuvamise laiust.

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

Paigutus

Kasutage meie asukohautiliite navigeerimisribade paigutamiseks mittestaatilistele kohtadele. Valige ülaosas fikseeritud, alla fikseeritud või ülaosas kleepuva (kerib koos lehega, kuni see jõuab ülaossa, seejärel jääb sinna). Fikseeritud navigeerimisribad kasutavad position: fixed, mis tähendab, et need eemaldatakse DOM-i tavapärasest voost ja võivad vajada kohandatud CSS-i (nt ), padding-topet <body>vältida kattumist teiste elementidega.

Pange tähele ka, et .sticky-topkasutab position: sticky, mida kõik brauserid täielikult ei toeta .

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

Kerimine

Lisamine .navbar-nav-scroll( .navbar-navvõi muule navigeerimisriba alamkomponendile), et võimaldada vertikaalset kerimist ahendatud navigeerimisriba ümberlülitatavas sisus. Vaikimisi algab kerimine 75vh(või 75% vaateava kõrgusest), kuid saate selle alistada kohaliku CSS-i kohandatud atribuudi --bs-navbar-heightvõi kohandatud stiilidega. Suuremates vaateavades, kui navigeerimisriba on laiendatud, kuvatakse sisu nagu vaikenavigeerimisribal.

Pange tähele, et sellel käitumisel on potentsiaalne puudus: overflowkui seadistus overflow-y: auto(siin on sisu kerimiseks vajalik), overflow-xon samaväärne parameetriga auto, mis kärbib osa horisontaalsest sisust.

Siin on näide navigeerimisriba kasutamisest .navbar-nav-scrollkoos style="--bs-scroll-height: 100px;", optimaalse vahekauguse tagamiseks mõned täiendavad veerisutiliitid.

<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" href="#" tabindex="-1" aria-disabled="true">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>

Reageerivad käitumised

Navigeerimisribad saavad kasutada .navbar-toggler, .navbar-collapse, ja .navbar-expand{-sm|-md|-lg|-xl|-xxl}klasse, et määrata, millal nende sisu nupu taga kokku kukub. Koos teiste utiliitidega saate hõlpsalt valida, millal konkreetseid elemente näidata või peita.

Naviribade jaoks, mis kunagi kokku ei vaju, lisage .navbar-expandklass navigeerimisribale. Alati ahenevate navigeerimisribade puhul ärge .navbar-expandklassi lisage.

Lüliti

Naviriba lülitid on vaikimisi joondatud vasakule, kuid kui need järgivad sõsarelementi (nt ) .navbar-brand, joondatakse need automaatselt parempoolsesse serva. Märgistuse ümberpööramine muudab lüliti paigutuse vastupidiseks. Allpool on näited erinevatest lülitusstiilidest.

.navbar-brandVäikseimas katkestuspunktis ei kuvata:

<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" href="#" tabindex="-1" aria-disabled="true">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>

Vasakul kuvatud kaubamärgiga ja paremal lülitiga:

<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" href="#" tabindex="-1" aria-disabled="true">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>

Vasakpoolse lülitiga ja paremal kaubamärgiga:

<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" href="#" tabindex="-1" aria-disabled="true">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>

Väline sisu

Mõnikord soovite kasutada ahendamise pistikprogrammi, et käivitada konteineri element sisu jaoks, mis asub struktuuriliselt väljaspool .navbar. Kuna meie pistikprogramm töötab idja data-bs-targetsobitab, on seda lihtne teha!

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

Kui teete seda, soovitame lisada täiendava JavaScripti, et viia fookus programmiliselt konteinerisse selle avamisel. Vastasel juhul on klaviatuurikasutajatel ja abitehnoloogiate kasutajatel tõenäoliselt raske äsja avaldatud sisu leida – eriti kui avatud konteiner on dokumendi struktuuris enne lülitit. Samuti soovitame veenduda, et lülitil oleks aria-controlsatribuut, mis osutab sisukonteinerile id. Teoreetiliselt võimaldab see abitehnoloogia kasutajatel hüpata otse lülitist selle juhitavasse konteinerisse, kuid selle tugi on praegu üsna ebaühtlane.

Sass

Muutujad

$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

Tundliku navigeerimisriba laiendamise/ahendamise klassid (nt .navbar-expand-lg) kombineeritakse $breakpointskaardiga ja genereeritakse tsükli kaudu 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;
        }
      }
    }
  }
}