Jya ku bintu nyamukuru Jya kuri docs
Check
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.
  • Gishya muri v5.2.0: Navbars irashobora kuba ifite insanganyamatsiko hamwe na CSS ihinduka ihindurwe kurwego rwibanze .navbar. .navbar-lightyateshejwe agaciro kandi .navbar-darkyongeye kwandikwa kugirango arengere impinduka za CSS aho kongeramo ubundi buryo.
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).

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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 (,,, ) me-autoibyiciro mb-2byingirakamaro .mb-lg-0me-2

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.

html 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar 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>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" 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>.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" 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.

html 
<nav class="navbar navbar-expand-lg 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>

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

html 
<nav class="navbar navbar-expand-lg 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>

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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <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:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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.

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

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

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

html 
<nav class="navbar navbar-expand-lg 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

Gishya muri v5.2.0: Navbar insanganyamatsiko ubu ikoreshwa nimpinduka za CSS kandi .navbar-lightyarasuzuguwe. Impinduka za CSS zikoreshwa kuri .navbar, zisanzwe kuri "urumuri", kandi zirashobora kurengerwa hamwe .navbar-dark.

Insanganyamatsiko ya Navbar iroroshye kuruta ikindi gihe cyose dukesha Bootstrap ihuza Sass na CSS ihinduka. Mburabuzi ni "urumuri navbar" yo gukoresha hamwe n'amabara yoroheje, ariko urashobora kandi gusaba .navbar-darkamabara 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" 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 .

html 
<div class="container">
  <nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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 kumurongo ugana hejuru, ushyizwe hepfo, wiziritse hejuru (umuzingo hamwe nurupapuro kugeza ugeze hejuru, hanyuma ugumeyo), cyangwa wiziritse hasi (umuzingo hamwe nurupapuro kugeza ugeze hepfo, hanyuma ugumaho ngaho).

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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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!

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

Offcanvas

Hindura uburyo bwagutse no gusenyuka navbar mumashanyarazi ya offcanvas hamwe nibice bya offcanvas . Twagura byombi offcanvas yuburyo busanzwe kandi dukoresha .navbar-expand-*amasomo yacu kugirango dukore urujya n'uruza rworoshye.

Murugero rukurikira, kugirango ukore offbarvas navbar ihora isenyuka hejuru yibice byose, usibye .navbar-expand-*ishuri burundu.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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" role="search">
          <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>

Kurema offcanvas navbar yaguka muburyo busanzwe bwa navbar kumurongo wihariye nka lg, koresha .navbar-expand-lg.

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

Mugihe ukoresheje offcanvas mumurongo wijimye, menya ko ushobora gukenera kuba ufite umwijima wijimye kubintu bya offcanvas kugirango wirinde ko inyandiko itemewe. Murugero rukurikira, twongeyeho .navbar-darkno .bg-darkkuri .navbar, .text-bg-darkkuri .offcanvas, Kuri, .dropdown-menu-darkKuri .dropdown-menu, na .btn-close-whiteKuri .btn-closeKuburyo bukwiye hamwe na offcanvas yijimye.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihinduka CSS ihinduka, navbars ubu ikoresha CSS yaho ihinduka .navbarkugirango yongere igihe nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Impinduka zinyongera za CSS nazo zirahari kuri .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Guhinduranya binyuze muri CSS impinduka zirashobora kugaragara kumurongo .navbar-darkaho twirengagiza indangagaciro zihariye tutongeyeho kopi ya CSS.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Ibihinduka bya Sass

Ibihinduka kuri navbars zose:

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

Ibihinduka kuri navbar yijimye :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass loop

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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}