Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Navbar fɔ di wan dɛn we de

Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in pawaful, rispɔnsiv nevigishɔn hεda, di navbar. Inklud sɔpɔt fɔ branding, nevigishɔn, ɛn ɔda tin dɛn, inklud sɔpɔt fɔ wi kollaps plɔgin.

Na dis pej

Aw i de wok

Na dis na wetin yu nid fɔ no bifo yu bigin wit di navbar:

  • Navbars nid wan wrapping .navbarwit .navbar-expand{-sm|-md|-lg|-xl|-xxl}fɔ rispɔnsiv kollaps ɛn kala skim klas dɛn.
  • Navbars ɛn dɛn kɔntinyu na fluid bay difɔlt. Chenj di kɔntena fɔ stɔp dɛn ɔrizɔntal wit difrɛn we dɛn.
  • Yuz wi spays ɛn fleks yutiliti klas fɔ kɔntrol spɛshal ɛn alaynɛshɔn insay navbar dɛn.
  • Navbar dɛn kin ansa bay difɔlt, bɔt yu kin izi fɔ chenj dɛn fɔ chenj dat. Rispɔnsiv bihayvya dipen pan wi Kɔlaps JavaSkript plɔgin.
  • Mek shɔ se yu gɛt akses bay we yu yuz wan <nav>ɛlimɛnt ɔ, if yu de yuz wan mɔ jenɛrik ɛlimɛnt lɛk a <div>, ad a role="navigation"to ɛvri navbar fɔ mek yu no klia wan se na landmak rijyɔn fɔ di wan dɛn we de yuz ɛp tɛnkɔlɔji dɛn.
  • Sho di tin we yu de yuz naw bay we yu yuz aria-current="page"fɔ di pej we de naw ɔ aria-current="true"fɔ di tin we yu de yuz naw na wan sɛt.
  • Nyu insay v5.2.0: Navbar dɛn kin tim wit CSS vɛriɔbul dɛn we dɛn skɔp to di .navbarbays klas. .navbar-lightdɔn deprecated ɛn .navbar-darkdɛn dɔn rayt am bak fɔ ɔvalayz CSS vɛriɔbul dɛn instead fɔ ad ɔda stayl dɛn.
Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Kɔntinyu dɛn we dɛn sɔpɔt

Navbars kam wit bilt-in sɔpɔt fɔ wan anful sab-kɔmpɔnɛnt dɛn. Pik frɔm dɛn wan ya as nid de:

  • .navbar-brandfɔ yu kɔmni, prɔdak, ɔ prɔjek nem.
  • .navbar-navfɔ wan ful-ayt ɛn laytwɛt nevigishɔn (inklud sɔpɔt fɔ drɔpdɔwn dɛn).
  • .navbar-togglerfɔ yuz wit wi kollaps plɔgin ɛn ɔda nevigishɔn tɔglin bihayvya dɛn.
  • Fleks ɛn spɛshal yutiliti fɔ ɛni fɔm kɔntrol ɛn akshɔn dɛn.
  • .navbar-textfɔ ad string dɛn we gɛt tɛks we gɛt vertikal sɛnt.
  • .collapse.navbar-collapsefɔ grup ɛn ayd navbar kɔntinyu bay wan mama ɛn papa brekpɔynt.
  • Ad wan opshɔnal .navbar-scrollfɔ sɛt wan max-heightɛn skrol ɛkspanda navbar kɔntinyu .

Na dis na wan ɛgzampul fɔ ɔl di sab-kɔmpɔnɛnt dɛn we de insay wan rispɔnsiv layt-tim navbar we de kɔlaps ɔtomɛtik wan na di lg(big) brekpɔynt.

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>

Dis ɛgzampul de yuz bakgrɔn ( bg-light) ɛn spɛshal ( me-auto, mb-2, mb-lg-0, me-2) yutiliti klas dɛn.

Mak

Di .navbar-brandkin aplay to bɔku ɛlimɛnt dɛn, bɔt wan ankɔ de wok fayn, as sɔm ɛlimɛnt dɛn kin nid yutiliti klas ɔ kɔstɔm stayl dɛn.

Tɛks

Ad yu tɛks insay wan ɛlimɛnt wit di .navbar-brandklas.

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>

Aydul

Yu kin chenj di tɛks we de insay di buk .navbar-brandwit wan <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>

Imej ɛn tɛks

Yu kin yuz sɔm ɔda tin dɛn bak fɔ ad pikchɔ ɛn tɛks di sem tɛm. Notis di ad we dɛn ad .d-inline-blockɛn .align-text-toppan di <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 nevigishɔn link dɛn bil pan wi .navopshɔn dɛn wit dɛn yon modifya klas ɛn dɛn nid fɔ yuz toggler klas dɛn fɔ mek dɛn stayl di rayt we fɔ ansa. Nevigishɔn insay navbar dɛn go gro bak fɔ tek bɔku ɔrizɔntal spɛs as pɔsibul fɔ kip yu navbar kɔntinyu dɛn alaynɛd ​​fayn fayn wan.

Ad di .activeklas pan .nav-linkfɔ sho di pej we de naw.

Duya mɛmba se yu fɔ ad di aria-currentatribyut bak na di aktif .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>

Ɛn bikɔs wi de yuz klas fɔ wi nav dɛn, yu kin avɔyd di list-based aprɔch ɔltogɛda if yu want.

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>

Yu kin yuz drɔpdɔwn dɛn bak na yu navbar. Drɔpdɔwn mɛnyu dɛn nid fɔ rap ɛlimɛnt fɔ posishun, so mek shɔ se yu yuz sɛpret ɛn nɛst ɛlimɛnt dɛn fɔ .nav-itemɛn .nav-linklɛk aw dɛn sho dɔŋ ya.

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>

Fɔm dɛn

Put difrɛn fɔm kɔntrol ɛn kɔmpɔnɛnt dɛn insay wan 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>

Wantɛm pikin ɛlimɛnt dɛn fɔ .navbaryuz fleks layout ɛn go difɔlt to justify-content: space-between. Yuz ɔda fleks yutiliti dɛn as nid de fɔ ajɔst dis bihayvya.

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>

Input grup dɛn de wok, dɛnsɛf. If yu navbar na wan ol fɔm, ɔ mɔs na fɔm, yu kin yuz di <form>ɛlimɛnt as di kɔntena ɛn sev sɔm HTML.

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>

Difrɛn bɔtin dɛn de sɔpɔt as pat pan dɛn navbar fɔm dɛn ya, bak. Dis na big mɛmba bak se dɛn kin yuz vertikal alaynɛshɔn yutiliti fɔ alaynɛd ​​difrɛn saiz ɛlimɛnt dɛn.

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>

Tɛks

Navbar dɛn kin gɛt bit dɛn fɔ tɛks wit di ɛp we .navbar-text. Dis klas de ajɔst vertikal alaynɛshɔn ɛn ɔrizɔntal spɛshal fɔ string dɛn na tɛks.

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

Miks ɛn mach wit ɔda kɔmpɔnɛnt ɛn yutiliti dɛn as nid de.

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>

Kɔlɔ skim dɛn

Nyu insay v5.2.0: Navbar tim naw na CSS vɛriɔbul dɛn de pawa am ɛn .navbar-lightdɛn dɔn pul am. CSS variebul dɛn de aplay to .navbar, difɔlt to di “layt” apinɛns, ɛn dɛn kin ɔvalayz wit .navbar-dark.

Navbar tim dɛn izi pas ɛva tank to Bootstrap in kɔmbaynshɔn fɔ Sass ɛn CSS vɛriɔbul dɛn. Di difɔlt na wi “layt navbar” fɔ yuz wit layt bakgrɔn kɔlɔ dɛn, bɔt yu kin aplay bak .navbar-darkfɔ dak bakgrɔn kɔlɔ dɛn. Dɔn, kɔstɔmayt wit .bg-*yutiliti dɛn.

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

Kɔntena dɛn

Pan ɔl we i nɔ nid, yu kin rap wan navbar insay a .containerfɔ sɛnt am na wan pej–pan ɔl we notis se dɛn stil nid fɔ gɛt kɔntena we de insay. Ɔ yu kin ad kɔntena insay di .navbarfɔ jɔs sɛnt di tin dɛn we de insay wan fiks ɔ statik tɔp navbar .

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>

Yuz ɛni wan pan di kɔntena dɛn we de ansa fɔ chenj aw dɛn de sho di tin dɛn we de insay yu navbar.

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

Di ples we dɛn fɔ put am

Yuz wi pozishɔn yutiliti fɔ put navbar dɛn na nɔ-statik pozishɔn dɛn. Pik frɔm di wan dɛn we dɛn dɔn fiks to di ɔp, di wan dɛn we dɛn dɔn fiks na di bɔt, we dɛn stik to di ɔp (skrol wit di pej te i rich ɔp, dɔn i de de), ɔ we dɛn stik na di bɔt (skrol wit di pej te i rich dɔŋ, dɔn i de de de).

Fiks navbar dɛn de yuz position: fixed, we min se dɛn pul dɛn frɔm di nɔmal flɔ na di DOM ɛn dɛn kin nid kɔstɔm CSS (ɛgz., padding-topna di <body>) fɔ mek dɛn nɔ ɔvalap wit ɔda ɛlimɛnt dɛn.

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>

We yu de skrol

Ad .navbar-nav-scrollto wan .navbar-nav(ɔ ɔda navbar sab-kɔmpɔnɛnt) fɔ mek yu ebul fɔ skrol vertikal insay di tin dɛn we yu kin tɔgl na wan navbar we dɔn kol. Bay difɔlt, skrol de kik in na 75vh(ɔ 75% pan di viupɔt ayt), bɔt yu kin ɔvalayz dat wit di lokal CSS kɔstɔm prɔpati --bs-navbar-heightɔ kɔstɔm stayl dɛn. Na big viupɔt dɛn we dɛn dɔn ɛkspɛn di navba, di tin dɛn we de insay go apia lɛk aw i de apin na difɔlt navba.

Duya mɛmba se dis bihayvya kam wit wan pɔtɛnɛshɛl drawback fɔ overflow—we sɛtin overflow-y: auto(we nid fɔ skrol di kɔntinyu ya), overflow-xna di ikwal to auto, we go krop sɔm ɔrizɔntal kɔntinyu.

Na wan ɛgzampul navbar we de yuz .navbar-nav-scrollwit style="--bs-scroll-height: 100px;", wit sɔm ɛkstra margin yutiliti fɔ optimum spays.

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>

Di we aw pipul dɛn de biev we dɛn de ansa

Navbar dɛn kin yuz .navbar-toggler, .navbar-collapse, ɛn .navbar-expand{-sm|-md|-lg|-xl|-xxl}klas dɛn fɔ no ustɛm dɛn kɔntinyu fɔ kol biɛn wan bɔtin. We yu jɔyn wit ɔda yutiliti dɛn, yu kin pik izi wan ustɛm fɔ sho ɔ ayd patikyula tin dɛn.

Fɔ navbar dɛn we nɔ de ɛva kɔlap, ad di .navbar-expandklas na di navbar. Fɔ navbar dɛn we kin ɔltɛm kol, nɔ ad ɛni .navbar-expandklas.

Toggler fɔ di wan dɛn we de chenj

Navbar togglers na lef-alayn bay difɔlt, bɔt if dɛn fala wan brɔda ɛn sista ɛlimɛnt lɛk wan .navbar-brand, dɛn go ɔtomɛtik alaynɛd ​​to di fa rayt. We yu rivɛns yu mak, i go rivɛns di ples we dɛn put di tɔgl. Dis dɔŋ ya na ɛgzampul dɛn bɔt difrɛn stayl dɛn we dɛn kin yuz fɔ tɔgl.

Wit no .navbar-brandsho na di smol brekpoint:

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>

Wit wan brand nem we dɛn sho na di lɛft ɛn toggler na di rayt say:

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>

Wit wan toggler na di lef ɛn brand nem na di rayt:

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>

Di tin dɛn we de na do

Sɔntɛnde yu want fɔ yuz di kɔlapshɔn plɔgin fɔ trig wan kɔntena ɛlimɛnt fɔ kɔntinyu we strɔkchɔral wan sidɔm ausayd di .navbar. Bikɔs wi plɔgin de wok pan di idɛn data-bs-targetmaching, dat kin izi fɔ du!

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>

We yu du dis, wi kin advays yu fɔ put ɔda JavaSkript fɔ muv di fɔs programmatik wan to di kɔntena we dɛn opin am. If nɔto dat, di wan dɛn we de yuz kibɔd ɛn di wan dɛn we de yuz ɛp tɛnknɔlɔji dɛn go mɔs gɛt prɔblɛm fɔ fɛn di nyu tin dɛn we dɛn dɔn sho - mɔ if di kɔntena we dɛn bin opin kam bifo di tɔgl na di dɔkyumɛnt in strɔkchɔ. Wi kin advays bak fɔ mek shɔ se di tɔgl gɛt di aria-controlsatribyut, we de pɔynt to di idɔf di kɔntinyu kɔntena. In tiori, dis de alaw di wan dɛn we de yuz di ɛp tɛknɔlɔji fɔ jomp dairekt frɔm di tɔglɔr to di kɔntena we i de kɔntrol–bɔt sɔpɔt fɔ dis naw rili patchy.

Ɔfkanvas

Transfɔm yu navbar we de ɛkspɛn ɛn we de kol to wan ɔfkanvas drɔwa wit di ɔfkanvas kɔmpɔnɛnt . Wi de ɛkstɛnd ɔl tu di ɔfkanvas difɔlt stayl dɛn ɛn yuz wi .navbar-expand-*klas dɛn fɔ mek wan dinamik ɛn fleksibul nevigishɔn saydba.

Insay di ɛgzampul we de dɔŋ ya, fɔ mek wan ɔfkanvas navbar we kin ɔltɛm kɔlap akɔdin to ɔl di brekpɔynt dɛn, pul di .navbar-expand-*klas ɔltogɛda.

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>

Fɔ mek wan ɔfkanvas navbar we de ɛkspɛn to wan nɔmal navbar na wan patikyula brekpɔynt lɛk lg, yuz .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>

We yu de yuz ɔfkanvas na dak navbar, mɛmba se yu go nid fɔ gɛt dak bakgrɔn na di ɔfkanvas kɔntinyu fɔ mek di tɛks nɔ go izi fɔ rid. Insay di ɛgzampul we de dɔŋ ya, wi ad .navbar-darkɛn .bg-darkto di .navbar, .text-bg-darkto di .offcanvas, .dropdown-menu-darkto .dropdown-menu, ɛn .btn-close-whiteto .btn-closefɔ mek yu stayl fayn wit dak ɔfkanvas.

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 we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, navbar dɛn naw de yuz lokal CSS vɛriɔbul dɛn on .navbarfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$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};

Sɔm ɔda CSS vɛriɔbul dɛn de bak pan .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);

Yu kin si kɔstɔmayshɔn tru CSS vɛriɔbul dɛn na di .navbar-darkklas usay wi de ɔvalayz spɛshal valyu dɛn we wi nɔ ad dupliket CSS sɛlɛktɔ dɛn.

  --#{$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)};

Sass di vayriɔbul dɛn

Variables fɔ ɔl di navbar dɛn:

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

Variables fɔ di dak navbar : .

$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 na di loop

Rispɔnsiv navbar ɛkspɛn/kɔlaps klas dɛn (ɛgz., .navbar-expand-lg) dɛn jɔyn wit di $breakpointsmap ɛn dɛn de jenarayz dɛn tru wan lɔp insay 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;
          }
        }
      }
    }
  }
}