in English

Navigbar

Dokumentācija un piemēri Bootstrap jaudīgajai, atsaucīgajai navigācijas galvenei, navigācijas joslai. Ietver atbalstu zīmola veidošanai, navigācijai un citam, tostarp atbalstam mūsu sabrukšanas spraudnim.

Šajā lapā

Kā tas strādā

Lūk, kas jums jāzina pirms darba sākšanas ar navigācijas joslu:

Navigācijas joslām ir nepieciešams iesaiņojums .navbarar .navbar-expand{-sm|-md|-lg|-xl|-xxl}, lai pielāgotu sabrukšanas un krāsu shēmu klases.
Navigācijas joslas un to saturs pēc noklusējuma ir mainīgi. Mainiet konteineru , lai dažādos veidos ierobežotu to horizontālo platumu.
Izmantojiet mūsu atstarpes un elastīgās lietderības klases, lai kontrolētu atstarpi un līdzinājumu navigācijas joslās.
Navigācijas joslas pēc noklusējuma ir atsaucīgas, taču varat tās viegli modificēt, lai to mainītu. Reakcijas darbība ir atkarīga no mūsu Collapse JavaScript spraudņa.
Nodrošiniet pieejamību, izmantojot <nav>elementu, vai, ja izmantojat vispārīgāku elementu, piemēram, <div>, pievienojiet role="navigation"katrai navigācijas joslai, lai to skaidri identificētu kā orientieri palīgtehnoloģiju lietotājiem.
Norādiet pašreizējo vienumu, izmantojot aria-current="page"pašreizējo lapu vai aria-current="true"pašreizējo komplekta vienumu.

Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Atbalstīts saturs

Navigbars ir aprīkots ar iebūvētu atbalstu nedaudzām apakškomponentiem. Pēc vajadzības izvēlieties kādu no šīm iespējām:

.navbar-brandjūsu uzņēmuma, produkta vai projekta nosaukumam.
.navbar-navpilna augstuma un vieglai navigācijai (ieskaitot atbalstu nolaižamajām izvēlnēm).
.navbar-togglerizmantošanai ar mūsu sakļautības spraudni un citām navigācijas pārslēgšanas darbībām.
Elastības un atstarpju utilītas jebkuras formas vadīklām un darbībām.
.navbar-textvertikāli centrētu teksta virkņu pievienošanai.
.collapse.navbar-collapsenavigācijas joslas satura grupēšanai un slēpšanai pēc vecāka pārtraukuma punkta.
Pievienojiet neobligātu .navbar-scroll, lai iestatītu max-heightun ritinātu izvērsto navigācijas joslas saturu .

Šis ir visu apakškomponentu piemērs, kas iekļauts adaptīvā gaismas tematikas navigācijas joslā, kas automātiski sakļaujas lg(lielajā) pārtraukuma punktā.

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

Šajā piemērā tiek izmantotas fona ( bg-light) un atstarpes ( my-2, my-lg-0, me-sm-0, my-sm-0) lietderības klases.

Zīmols

.navbar-brandVar lietot lielākajai daļai elementu, taču vislabāk darbojas enkurs, jo dažiem elementiem var būt nepieciešamas utilīta klases vai pielāgoti stili .

Teksts

Pievienojiet tekstu elementam kopā ar .navbar-brandklasi.

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

Attēls

Jūs varat aizstāt tekstu iekšpusē .navbar-brandar <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>

Attēls un teksts

Varat arī izmantot dažas papildu utilītas, lai vienlaikus pievienotu attēlu un tekstu. Ņemiet vērā pievienošanu .d-inline-blockun .align-text-topuz <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

Navigācijas joslas navigācijas saites ir balstītas uz mūsu .navopcijām ar savām modifikācijas klasēm, un tām ir jāizmanto pārslēgšanas klases , lai nodrošinātu pareizu atsaucību. Navigācija navigācijas joslās arī palielināsies, lai aizņemtu pēc iespējas vairāk horizontālās vietas, lai jūsu navigācijas joslas saturs būtu droši saskaņots.

Pievienojiet .activeklasi, .nav-linklai norādītu pašreizējo lapu.

Lūdzu, ņemiet vērā, ka atribūts jāpievieno arī aria-currentaktīvajam .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>

Un, tā kā mēs izmantojam klases mūsu navigācijas sistēmām, jūs varat pilnībā izvairīties no uz sarakstu balstītas pieejas, ja vēlaties.

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

Varat arī izmantot nolaižamās izvēlnes navigācijas joslā. Nolaižamajām izvēlnēm pozicionēšanai ir nepieciešams iesaiņojuma elements, tāpēc noteikti izmantojiet atsevišķus un ligzdotus elementus, .nav-itemkā .nav-linkparādīts tālāk.

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

Veidlapas

Ievietojiet dažādas veidlapas vadīklas un komponentus navigācijas joslā:

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

Tūlītējie pakārtotie elementi, kas tiek .navbarizmantoti elastīgā izkārtojumā, un pēc noklusējuma tiks izmantoti justify-content: space-between. Ja nepieciešams, izmantojiet papildu elastīgās utilītas , lai pielāgotu šo darbību.

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

Darbojas arī ievades grupas. Ja navigācijas josla ir visa veidlapa vai galvenokārt veidlapa, varat izmantot šo <form>elementu kā konteineru un saglabāt daļu HTML.

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

Šajās navigācijas joslas formās tiek atbalstītas arī dažādas pogas. Tas ir arī lielisks atgādinājums, ka vertikālās izlīdzināšanas utilītas var izmantot dažādu izmēru elementu līdzināšanai.

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

Teksts

Navigācijas joslās var būt teksta fragmenti, izmantojot .navbar-text. Šī klase pielāgo teksta virkņu vertikālo līdzinājumu un horizontālo atstarpi.

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

Ja nepieciešams, sajauciet un saskaņojiet ar citiem komponentiem un utilītprogrammām.

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

Krāsu shēmas

Navigācijas joslas tēmu veidošana nekad nav bijusi vienkāršāka, pateicoties tematisko klašu un background-colorutilītu kombinācijai. Izvēlieties kādu no .navbar-lightlietošanai ar gaišām fona krāsām vai .navbar-darktumšām fona krāsām. Pēc tam pielāgojiet, izmantojot .bg-*utilītas.

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

Konteineri

Lai gan tas nav nepieciešams, varat ietīt navigācijas joslu, .containerlai to centrētu lapā, taču ņemiet vērā, ka iekšējais konteiners joprojām ir nepieciešams. Vai arī varat pievienot konteineru iekšpusē, .navbarlai centrētu tikai fiksētas vai statiskas augšējās navigācijas joslas saturu .

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

Izmantojiet jebkuru no adaptīvajiem konteineriem, lai mainītu navigācijas joslas satura attēlojuma platumu.

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

Izvietojums

Izmantojiet mūsu pozīciju utilītas , lai novietotu navigācijas joslas nestatiskās pozīcijās. Izvēlieties fiksētu uz augšu, fiksētu uz leju vai pielīmētu augšpusē (ritina ar lapu, līdz tā sasniedz augšdaļu, pēc tam paliek tur). Fiksētās navigācijas joslas izmanto position: fixed, kas nozīmē, ka tās tiek izņemtas no parastās DOM plūsmas, un tām var būt nepieciešams pielāgots CSS (piemēram, padding-topuz <body>), lai novērstu pārklāšanos ar citiem elementiem.

Ņemiet vērā arī to, ka .sticky-toplietojumi position: sticky, kas netiek pilnībā atbalstīti katrā pārlūkprogrammā .

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

Ritināšana

Pievienojiet .navbar-nav-scrollkādam .navbar-nav(vai citam navigācijas joslas apakškomponentam), lai iespējotu vertikālo ritināšanu sakļautās navigācijas joslas pārslēdzamajā saturā. Pēc noklusējuma ritināšana tiek aktivizēta 75vh(vai 75% no skata loga augstuma), taču jūs varat to ignorēt, izmantojot vietējo CSS pielāgoto rekvizītu --bs-navbar-heightvai pielāgotos stilus. Lielākos skatu laukos, kad navigācijas josla ir izvērsta, saturs tiks parādīts tāpat kā noklusējuma navigācijas joslā.

Lūdzu, ņemiet vērā, ka šādai darbībai ir potenciāls trūkums: overflowiestatījums overflow-y: auto(šeit ir nepieciešams, lai ritinātu saturu) overflow-xir līdzvērtīgs auto, kas apgriež daļu horizontālā satura.

Šeit ir piemērs navigācijas joslai, kurā tiek izmantots , .navbar-nav-scrollar style="--bs-scroll-height: 100px;"dažām papildu piemales utilītprogrammām optimālai atstarpei.

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

Atsaucīga uzvedība

Navigācijas joslas var izmantot .navbar-toggler, .navbar-collapseun .navbar-expand{-sm|-md|-lg|-xl|-xxl}klases, lai noteiktu, kad to saturs sakļaujas aiz pogas. Kombinācijā ar citām utilītprogrammām varat viegli izvēlēties, kad rādīt vai slēpt konkrētus elementus.

Navigācijas joslām, kas nekad nesakļaujas, pievienojiet .navbar-expandklasi navigācijas joslā. Navigācijas joslām, kas vienmēr sakļaujas, nepievienojiet nevienu .navbar-expandklasi.

Pārslēdzējs

Navigācijas joslas pārslēgi pēc noklusējuma ir līdzināti pa kreisi, taču, ja tie seko kādam brālim, piemēram .navbar-brand, , tie tiks automātiski līdzināti pa labi. Mainot marķējumu, tiks mainīts pārslēgšanas slēdža izvietojums. Tālāk ir sniegti dažādu pārslēgšanas stilu piemēri.

With no .navbar-brand shown at the smallest breakpoint:

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

With a brand name shown on the left and toggler on the right:

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

With a toggler on the left and brand name on the right:

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

External content

Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the .navbar . Because our plugin works on the id and data-bs-target matching, that’s easily done!

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>

When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes before the toggler in the document’s structure. We also recommend making sure that the toggler has the aria-controls attribute, pointing to the id of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.

Offcanvas

Pārveidojiet savu izvēršamo un sakļaujamo navigācijas joslu par offcanvas atvilktni, izmantojot spraudni offcanvas. Mēs paplašinām gan offcanvas noklusējuma stilus, gan izmantojam mūsu .navbar-expand-*klases, lai izveidotu dinamisku un elastīgu navigācijas sānjoslu.

Tālāk esošajā piemērā, lai izveidotu ārpus kanvas navigācijas joslu, kas vienmēr ir sakļauta visos pārtraukuma punktos, .navbar-expand-*pilnībā izlaidiet klasi.

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

Lai izveidotu offcanvas navigācijas joslu, kas izvēršas par parastu navigācijas joslu noteiktā pārtraukuma punktā, piemēram lg, izmantojiet .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

Mainīgie lielumi

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

Cilpa

Adaptīvās navigācijas joslas izvēršanas/saukšanas klases (piem., .navbar-expand-lg) tiek apvienotas ar $breakpointskarti un ģenerētas, izmantojot cilpu 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;
        }
      }
    }
  }
}