in English

Navbar

Dokumentaatio ja esimerkkejä Bootstrapin tehokkaasta, responsiivisesta navigointiotsikosta, navigointipalkista. Sisältää tuen brändäykselle, navigoinnille ja muille, mukaan lukien tuki tiivistyslaajennuksellemme.

Tällä sivulla

Kuinka se toimii

Seuraavassa on mitä sinun tulee tietää ennen kuin aloitat navigointipalkin käytön:

Navigointipalkit vaativat kääreen responsiivista kutistamista ja .navbarvärimaailmaluokkia varten ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
Navigointipalkit ja niiden sisältö ovat oletuksena sulavia. Muuta säilöä rajoittaaksesi niiden vaakasuuntaista leveyttä eri tavoin.
Käytä väli- ja flex utility -luokkia ohjataksesi välilyöntejä ja kohdistusta navigointipalkeissa .
Navigointipalkit reagoivat oletusarvoisesti, mutta voit muuttaa niitä helposti muokkaamalla sitä. Responsiivinen käyttäytyminen riippuu Collapse JavaScript -laajennuksestamme.
Varmista saavutettavuus käyttämällä <nav>elementtiä tai, jos käytät yleisempää elementtiä, kuten <div>, lisää role="navigation"jokaiseen navigointipalkkiin tunnistaaksesi sen selkeästi maamerkkialueeksi aputekniikoiden käyttäjille.
Ilmoita nykyinen kohde käyttämällä aria-current="page"nykyistä sivua tai aria-current="true"joukon nykyistä kohdetta.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Tuettu sisältö

Navbareissa on sisäänrakennettu tuki kouralliselle osakomponentille. Valitse tarvittaessa seuraavista:

.navbar-brandyrityksesi, tuotteesi tai projektisi nimeen.
.navbar-navtäyskorkeaa ja kevyttä navigointia varten (mukaan lukien pudotusvalikoiden tuki).
.navbar-togglerkäytettäväksi tiivistyslaajennuksen ja muiden navigoinnin vaihtotoimintojen kanssa .
Jousto- ja välitysapuohjelmat kaikille lomakeohjaimille ja -toiminnoille.
.navbar-textpystysuoraan keskitettyjen tekstijonojen lisäämiseen.
.collapse.navbar-collapsenavigointipalkin sisällön ryhmittelyyn ja piilottamiseen ylätason keskeytyskohdan mukaan.
Lisää valinnainen .navbar-scroll, jos haluat määrittää max-heightja vierittää laajennettua navigointipalkin sisältöä .

Tässä on esimerkki kaikista alikomponenteista, jotka sisältyvät reagoivaan valoteemalla olevaan navigointipalkkiin, joka kutistuu automaattisesti lg(isossa) keskeytyspisteessä.

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

Tässä esimerkissä käytetään tausta ( bg-light) ja väli ( my-2, my-lg-0, me-sm-0, my-sm-0) hyödyllisyysluokkia.

Brändi

Voidaan soveltaa useimpiin elementteihin , .navbar-brandmutta ankkuri toimii parhaiten, koska jotkin elementit saattavat vaatia hyödyllisyysluokkia tai mukautettuja tyylejä.

Teksti

Lisää tekstisi elementtiin .navbar-brandluokan kanssa.

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

Kuva

Voit korvata tekstin .navbar-brandsisällä <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>

Kuva ja teksti

Voit myös käyttää joitain lisäapuohjelmia kuvan ja tekstin lisäämiseen samanaikaisesti. Huomaa lisäys .d-inline-blockja .align-text-top.<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

Navigointilinkit perustuvat .navvaihtoehtoihimme omalla muokkausluokalla ja vaativat vaihtoluokkien käyttöä oikean responsiivisen tyylin aikaansaamiseksi. Navigointipalkkien navigointi kasvaa myös viemään mahdollisimman paljon vaakasuuntaista tilaa , jotta navigointipalkin sisältö pysyy varmasti kohdakkain.

Lisää .activeluokka .nav-linkosoittamaan nykyinen sivu.

Huomaa, että sinun tulee myös lisätä aria-currentattribuutti aktiiviseen .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>

Ja koska käytämme luokkia naveissamme, voit halutessasi välttää luettelopohjaisen lähestymistavan kokonaan.

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

Voit myös käyttää avattavia valikoita navigointipalkissa. Avattavat valikot edellyttävät käärimiselementin sijoittamista varten, joten muista käyttää erillisiä ja sisäkkäisiä elementtejä .nav-itemalla .nav-linkkuvatulla tavalla.

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

Lomakkeet

Sijoita erilaisia lomakesäätimiä ja komponentteja navigointipalkkiin:

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

Käytön välittömät alielementit .navbarjoustavat asettelun ja ovat oletuksena justify-content: space-between. Käytä tarvittaessa muita joustavia apuohjelmia tämän toiminnan säätämiseen.

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

Myös syöttöryhmät toimivat. Jos navigointipalkki on koko lomake tai enimmäkseen lomake, voit käyttää <form>elementtiä säilönä ja tallentaa HTML-koodia.

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

Erilaisia painikkeita tuetaan myös osana näitä navigointipalkin lomakkeita. Tämä on myös hyvä muistutus siitä, että pystysuuntaista kohdistusta voidaan käyttää erikokoisten elementtien kohdistamiseen.

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

Teksti

Navigointipalkit voivat sisältää tekstiä .navbar-text. Tämä luokka säätää tekstijonojen pystysuuntausta ja vaakaväliä.

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

Sekoita ja sovita muiden komponenttien ja apuohjelmien kanssa tarpeen mukaan.

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

Navigointipalkin teeman tekeminen ei ole koskaan ollut helpompaa teemaluokkien ja background-colorapuohjelmien yhdistelmän ansiosta. Valitse .navbar-lightkäytettäväksi vaaleiden taustavärien kanssa tai .navbar-darktummien taustavärien kanssa. Mukauta sitten .bg-*apuohjelmilla.

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

Säiliöt

Vaikka se ei ole pakollinen, voit kääriä navigointipalkin a -kenttään .containerkeskittääksesi sen sivulle. Huomaa kuitenkin, että sisäsäiliö tarvitaan silti. Tai voit lisätä säiliön sisälle keskittääksesi .navbarvain kiinteän tai staattisen ylänavigointipalkin sisällön .

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

Käytä mitä tahansa responsiivisista säilöistä muuttaaksesi, kuinka laajasti navigointipalkin sisältö näytetään.

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

Sijoitus

Käytä sijaintityökalujamme navigointipalkkien sijoittamiseen ei-staattisiin paikkoihin. Valitse kiinteä ylös, kiinnitetty alaosaan tai kiinnitetty yläosaan (vieritä sivua, kunnes se saavuttaa yläreunan, ja pysyy sitten siellä). Kiinteät navigointipalkit käyttävät position: fixed, mikä tarkoittaa, että ne vedetään normaalista DOM-virrasta ja saattavat vaatia mukautetun CSS padding-top:n (esim. <body>) päällekkäisyyden estämiseksi muiden elementtien kanssa.

Huomaa myös, että .sticky-topkäyttää position: sticky, jota ei tueta täysin kaikissa selaimissa .

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

Vieritys

Lisää .navbar-nav-scroll( .navbar-navtai muuhun navigointipalkin alikomponenttiin) mahdollistaaksesi pystysuuntaisen vierityksen tiivistetyn navigointipalkin vaihdettavan sisällön sisällä. Oletusarvoisesti vieritys alkaa 75vh(tai 75 %:lla näkymän korkeudesta), mutta voit ohittaa sen paikallisella mukautetulla CSS-ominaisuudella --bs-navbar-heighttai mukautetuilla tyyleillä. Kun navigointipalkkia laajennetaan suuremmissa kuvaporteissa, sisältö näkyy samalla tavalla kuin oletusnavigointipalkissa.

Huomaa, että tähän toimintaan liittyy mahdollinen haittapuoli: overflow-kun asetus overflow-y: auto(vaaditaan sisällön vierittämiseen tässä), overflow-xon vastineeksi auto, joka rajaa jonkin verran vaakasuuntaista sisältöä.

Tässä on esimerkki navigointipalkista, jossa käytetään .navbar-nav-scroll: tä style="--bs-scroll-height: 100px;"ja joitain ylimääräisiä marginaaliapuohjelmia optimaalisen välin saavuttamiseksi.

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

Responsiiviset käytökset

Navigointipalkit voivat käyttää .navbar-toggler, .navbar-collapse, ja .navbar-expand{-sm|-md|-lg|-xl|-xxl}luokkia määrittääkseen, milloin niiden sisältö kutistuu painikkeen taakse. Yhdessä muiden apuohjelmien kanssa voit helposti valita, milloin haluat näyttää tai piilottaa tietyt elementit.

Lisää luokka navigointipalkkiin, jos ne eivät koskaan .navbar-expandkutistu. Älä lisää .navbar-expandluokkaa aina kutistuviin navigointipalkkeihin.

Toggler

Navigointipalkin vaihtajat tasataan oletuksena vasemmalle, mutta jos ne seuraavat sisarelementtiä, kuten .navbar-brand, ne tasataan automaattisesti äärioikealle. Merkintöjen kääntäminen kääntää vaihtopainikkeen sijainnin päinvastaiseksi. Alla on esimerkkejä erilaisista vaihtotyyleistä.

Ei .navbar-brandnäy pienimmässä keskeytyskohdassa:

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

Kun tuotemerkki näkyy vasemmalla ja vaihtokytkin oikealla:

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

Vasemmalla kytkin ja oikealla tuotenimi:

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

Ulkoinen sisältö

Joskus haluat käyttää tiivistyslaajennusta käynnistääksesi säilön elementin sisällölle, joka rakenteellisesti sijaitsee .navbar. Koska laajennuksemme toimii idja data-bs-targetvastaa, se on helppo tehdä!

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>

Kun teet tämän, suosittelemme lisäämään JavaScriptin, jotta kohdistus siirretään ohjelmallisesti säilöön, kun se avataan. Muuten näppäimistön käyttäjillä ja avustavien tekniikoiden käyttäjillä on todennäköisesti vaikeuksia löytää juuri paljastettua sisältöä - varsinkin jos avattu säilö on ennen vaihtokytkintä dokumentin rakenteessa. Suosittelemme myös varmistamaan, että vaihtajalla on aria-controlsattribuutti, joka osoittaa idsisältösäilön kohtaan. Teoriassa tämän avulla aputekniikan käyttäjät voivat siirtyä suoraan vaihtokytkimestä sen ohjaamaan säiliöön, mutta tuki tälle on tällä hetkellä melko hajanaista.

Offcanvas

Muuta laajeneva ja kutistuva navigointipalkki offcanvas-laatikoksi offcanvas-laajennuksella. Laajennamme sekä offcanvas-oletustyylejä että luomme .navbar-expand-*luokillamme dynaamisen ja joustavan navigointisivupalkin.

Alla olevassa esimerkissä luodaksesi offcanvas-navigointipalkin, joka on aina tiivistetty kaikissa keskeytyspisteissä, ohita .navbar-expand-*luokka kokonaan.

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

Voit luoda offcanvas-navigointipalkin, joka laajenee tavalliseksi navigointipalkin tietyssä keskeytyskohdassa lg, kuten .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

Muuttujat

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

Silmukka

Responsiiviset navigointipalkin laajennus-/tiivistysluokat (esim. .navbar-expand-lg) yhdistetään $breakpointskarttaan ja luodaan silmukan kautta 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;
        }
      }
    }
  }
}