Jya ku bintu nyamukuru Jya kuri docs
in English

Navbar

Inyandiko n'ingero kuri Bootstrap ikomeye, yitabira kugendana umutwe, navbar. Harimo inkunga yo kuranga, kugendana, nibindi byinshi, harimo inkunga yo gusenyuka kwa plugin.

Kuriyi page

Uburyo ikora

Dore ibyo ugomba kumenya mbere yo gutangira na navbar:

  • Navbars isaba gupfunyika .navbarhamwe .navbar-expand{-sm|-md|-lg|-xl|-xxl}no gusenyuka kwishura hamwe namasomo yamabara .
  • Navbars nibiyirimo biratemba muburyo busanzwe. Hindura kontineri kugirango ugabanye ubugari bwa horizontal muburyo butandukanye.
  • Koresha intera yacu na flex yingirakamaro kumasomo yo kugenzura intera no guhuza muri navbars.
  • Navbars irasubiza muburyo budasanzwe, ariko urashobora kuyihindura byoroshye kugirango uhindure ibyo. Imyitwarire isubiza biterwa no gusenyuka kwa JavaScript plugin.
  • Menya neza <nav>niba ukoresheje ikintu cyangwa, niba ukoresheje ibintu rusange nka a <div>, ongeraho role="navigation"kuri buri navbar kugirango ubigaragaze neza nkakarere kihariye kubakoresha ikoranabuhanga rifasha.
  • Erekana ikintu kiriho ukoresheje aria-current="page"kurupapuro rwubu cyangwa aria-current="true"kubintu biriho murutonde.
Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Ibishyigikiwe

Navbars izanye nubushakashatsi bwubatswe kubice bike. Hitamo muri ibi bikurikira nkuko bikenewe:

  • .navbar-brandkuri sosiyete yawe, ibicuruzwa, cyangwa izina ryumushinga.
  • .navbar-navkuburebure bwuzuye nuburemere bworoshye (harimo inkunga yo kumanuka).
  • .navbar-togglerkugirango ukoreshe hamwe no gusenyuka kwa plugin hamwe nizindi nzira zo kugendana imyitwarire.
  • Ibikoresho byoroshye kandi bitandukanya uburyo ubwo aribwo bwose bugenzura n'ibikorwa.
  • .navbar-textyo kongeramo uhagaritse imirongo yinyandiko.
  • .collapse.navbar-collapseyo guteranya no guhisha ibiri muri navbar kubabyeyi.
  • Ongeraho .navbar-scrolluburyo bwo gushiraho a max-heightno kuzenguruka kwagura ibiri muri navbar .

Dore urugero rwibice byose bigize ibice byashizwemo urumuri-rufite insanganyamatsiko ya navbar ihita isenyuka kuri lg(nini).

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

Uru rugero rukoresha background ( bg-light) hamwe nintera (,,, ) my-2ibyiciro my-lg-0byingirakamaro .me-sm-0my-sm-0

Ikirango

Irashobora .navbar-brandgukoreshwa mubintu byinshi, ariko inanga ikora neza, nkibintu bimwe bishobora gusaba amasomo yingirakamaro cyangwa uburyo bwihariye.

Inyandiko

Ongeraho inyandiko yawe mubintu hamwe .navbar-brandnishuri.

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

Ishusho

Urashobora gusimbuza inyandiko muri i .navbar-brandhamwe na <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>

Ishusho ninyandiko

Urashobora kandi gukoresha ibikoresho bimwe byinyongera kugirango wongere ishusho ninyandiko icyarimwe. Reba inyongera ya .d-inline-blockno .align-text-topkuri <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>

Navbar yoguhuza imiyoboro yubaka kumahitamo yacu .navhamwe nicyiciro cyabo cyo guhindura kandi bisaba gukoresha ibyiciro bya toggler kugirango bibe byiza. Kugenda muri navbars nabyo bizakura kugirango bifate umwanya munini utambitse kugirango bishoboke kugirango ibikubiyemo byawe bihuze neza.

Ongeraho .activeishuri .nav-linkkugirango werekane urupapuro rwubu.

Nyamuneka menya ko ugomba no kongeramo aria-currentikiranga kubikorwa .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>

Kandi kubera ko dukoresha amasomo kuri navs zacu, urashobora kwirinda uburyo bushingiye kurutonde rwose niba ubishaka.

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

Urashobora kandi gukoresha ibitonyanga muri navbar yawe. Ibitonyanga bitonyanga bisaba ikintu cyo gupfunyika kugirango uhagarare, bityo rero menya neza ko ukoresha ibintu bitandukanye kandi byashyizwe .nav-itemhamwe kandi .nav-linknkuko bigaragara hano hepfo.

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

Ifishi

Shira uburyo butandukanye bwo kugenzura n'ibigize muri 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>

Ako kanya abana ibintu byo .navbargukoresha flex imiterere kandi bizahinduka kuri justify-content: space-between. Koresha inyongera za flex zikenewe nkuko bikenewe kugirango uhindure iyi myitwarire.

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

Amatsinda yinjiza akora, nayo. Niba navbar yawe ari form yose, cyangwa ahanini ifishi, urashobora gukoresha <form>element nka kontineri hanyuma ukabika HTML zimwe.

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

Utubuto dutandukanye dushyigikiwe nkigice cyiyi form ya navbar, nayo. Ibi kandi nibutsa cyane ko vertical alignement utilities ishobora gukoreshwa muguhuza ibintu bitandukanye.

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

Inyandiko

Navbars irashobora kuba irimo bits yinyandiko ifashijwe na .navbar-text. Iri shuri rihindura vertical vertical na horizontal intera kumirongo yinyandiko.

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

Kuvanga no guhuza nibindi bice nibikoresho bikenewe.

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

Ibara

Gushushanya navbar ntabwo byigeze byoroha kuberako guhuza amasomo yibanze hamwe background-colornibikorwa. Hitamo kuva .navbar-lightkugirango ukoreshe hamwe n'amabara yoroheje, cyangwa .navbar-darkkumabara yijimye. Noneho, kora hamwe .bg-*nibikorwa byingirakamaro.

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

Ibikoresho

Nubwo bidasabwa, urashobora kuzinga navbar muri a .containerkugirango uyishyire kurupapuro - nubwo menya ko ikintu cyimbere gisabwa. Cyangwa urashobora kongeramo kontineri imbere .navbarkugirango ugere hagati gusa ibiri murwego ruhamye cyangwa ruhagaze neza .

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

Koresha ikintu icyo ari cyo cyose cyakiriwe kugirango uhindure uburyo bugari muri navbar yawe yerekanwe.

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

Gushyira

Koresha imyanya yacu yibikorwa kugirango ushire navbars mumwanya udahagaze. Hitamo kuva ushyizwe hejuru, ushyizwe hepfo, cyangwa wiziritse hejuru (umuzingo hamwe nurupapuro kugeza ugeze hejuru, hanyuma ugumeyo). Imiyoboro ihamye ikoreshwa position: fixed, bivuze ko yakuwe mubintu bisanzwe bya DOM kandi birashobora gusaba CSS yihariye (urugero, padding-topkuri <body>) kugirango wirinde guhuzagurika nibindi bintu.

Menya kandi ko .sticky-topikoresha position: sticky, idashyigikiwe byuzuye muri buri mushakisha .

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

Kuzunguruka

Ongeraho .navbar-nav-scrollkuri .navbar-nav(cyangwa izindi navbar sub-component) kugirango ushoboze guhindagurika muburyo buhindagurika bwibintu byavunitse. Mburabuzi, kuzunguruka biratera kuri 75vh(cyangwa 75% yuburebure bwo kureba), ariko urashobora kurenga ibyo hamwe numutungo wa CSS wibanze --bs-navbar-heightcyangwa imiterere yihariye. Kubireba binini iyo navbar yaguwe, ibirimo bizagaragara nkuko bigenda muburyo busanzwe.

Nyamuneka menya ko iyi myitwarire ije ifite ingaruka zishobora kubaho - mugihe overflowigenamigambi overflow-y: auto(risabwa kuzunguruka ibirimo hano), overflow-xni kimwe na auto, kizatanga umusaruro utambitse.

Dore urugero navbar ukoresheje .navbar-nav-scrollhamwe style="--bs-scroll-height: 100px;", hamwe na margin yinyongera yingirakamaro kumwanya mwiza.

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

Imyitwarire isubiza

Navbars irashobora gukoresha .navbar-toggler, .navbar-collapsehamwe .navbar-expand{-sm|-md|-lg|-xl|-xxl}namasomo kugirango umenye igihe ibirimo bisenyutse inyuma ya buto. Ufatanije nibindi bikoresho, urashobora guhitamo byoroshye igihe cyo kwerekana cyangwa guhisha ibintu runaka.

Kuri navbars itigera isenyuka, ongeramo urwego .navbar-expandkuri navbar. Kuri navbars ihora isenyuka, ntukongere urwego urwo arirwo rwose .navbar-expand.

Toggler

Navbar togglers isigaye-ihujwe nibisanzwe, ariko nibakurikiza ikintu kivukana nka a .navbar-brand, bazahita bahuza iburyo. Guhindura ibimenyetso byawe bizahindura ishyirwa rya toggler. Hano hariburorero bwuburyo butandukanye bwo guhinduranya.

Hamwe ntagaragajwe .navbar-brandkumurongo muto:

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

Hamwe nizina ryirango ryerekanwe ibumoso na toggler iburyo:

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

Hamwe na toggler ibumoso nizina ryikirango iburyo:

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

Ibiri hanze

Rimwe na rimwe, ushaka gukoresha plugin yo gusenyuka kugirango utere ikintu cya kontineri kubintu byicaye hanze ya .navbar. Kuberako plugin yacu ikora kuri idno data-bs-targetguhuza, ibyo biroroshye gukorwa!

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

Mugihe ukoze ibi, turasaba gushyiramo JavaScript yinyongera kugirango wimure icyerekezo kuri programme kuri kontineri iyo ifunguye. Bitabaye ibyo, abakoresha clavier hamwe n’abakoresha tekinoroji ifasha birashoboka ko bazagira ikibazo cyo kubona ibintu bishya byagaragaye - cyane cyane niba kontineri yafunguwe ije mbere yo guhindagura imiterere yinyandiko. Turasaba kandi kwemeza neza ko uwahinduye afite aria-controlsikiranga, yerekana idibikubiye muri kontineri. Mubyigisho, ibi bituma abakoresha ikorana buhanga basimbuka biturutse kuri toggler berekeza kuri kontineri igenzura - ariko inkunga kuri ibi iroroshye.

Sass

Ibihinduka

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

Umuzingi

Navbar yitabira kwagura / gusenyuka ibyiciro (urugero, .navbar-expand-lg) byahujwe $breakpointsnikarita kandi byakozwe binyuze mumuzinga 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;
        }
      }
    }
  }
}