Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Navbar nga

Dokumentasion ken dagiti pagarigan para iti nabileg, makasungbat nga ulo ti nabigasion ti Bootstrap, ti navbar. Iramanna ti suporta para iti branding, nabigasion, ken dadduma pay, agraman ti suporta para iti collapse plugin-mi.

Iti daytoy a panid

No kasano ti panagandar dayta

Adtoy ti masapul nga ammuem sakbay a mangrugika iti navbar:

  • Dagiti navbar ket agkasapulan ti panagbalkot .navbarnga addaan .navbar-expand{-sm|-md|-lg|-xl|-xxl}para kadagiti makasungbat a panagrebba ken dagiti klase ti eskema ti kolor .
  • Dagiti navbar ken dagiti linaonda ket pluido babaen ti default. Baliwan ti pagkargaan tapno malimitaran ti horizontal width-da iti nadumaduma a pamay-an.
  • Usaren dagiti klasemi ti spacing ken flex utility para iti panangtengngel ti espasyo ken panagtunos iti uneg dagiti navbar.
  • Dagiti navbar ket makasungbat babaen ti default, ngem nalakam a baliwan dagitoy tapno mabaliwan dayta. Ti makasungbat a kababalin ket agpannuray iti pluginmi a Collapse JavaScript.
  • Siguraduen ti pannakagun-od babaen ti panagusar ti <nav>elemento wenno, no agus-usar ti ad-adu a sapasap nga elemento a kas ti <div>, inayon ti role="navigation"a iti tunggal maysa a navbar tapno nalawag a mailasin daytoy a kas maysa a pagilasinan a rehion para kadagiti agar-aramat kadagiti makatulong a teknolohia.
  • Ipamatmat ti agdama a banag babaen ti panagusar aria-current="page"para iti agdama a panid wenno aria-current="true"para iti agdama a banag iti maysa a set.
  • Baro iti v5.2.0: Dagiti Navbar ket mabalin a maitemaan kadagiti CSS a variable a naisakop iti .navbarbatayan a klase. .navbar-lightket naikkaten ken .navbar-darknaisurat manen tapno mangbalbaliw kadagiti variable ti CSS imbes a manginayon kadagiti kanayonan nga estilo.
Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Nasuportaran a linaon

Dagiti Navbar ket umay nga addaan iti naibangon a suporta para iti sumagmamano a sub-paset. Pumili kadagiti sumaganad no kasapulan:

  • .navbar-brandpara iti nagan ti kompaniam, produktom, wenno proyektom.
  • .navbar-navpara iti naan-anay a kangato ken nalag-an a panaglayag (agraman ti suporta para kadagiti dropdown).
  • .navbar-togglerpara iti panagusar iti collapse plugin-tayo ken dagiti dadduma pay a kababalin ti panag-toggling ti nabigasion .
  • Flex ken spacing utilities para iti ania man a porma a kontrol ken tignay.
  • .navbar-textpara iti pananginayon kadagiti bertikal a naisentro a kuerdas ti teksto.
  • .collapse.navbar-collapsepara iti panaggrupo ken panangilemmeng kadagiti linaon ti navbar babaen ti nagannak a breakpoint.
  • Manginayon ti opsional .navbar-scrolltapno mangikeddeng ti maysa max-heightken ag- scroll iti napalawa a linaon ti navbar .

Adda ditoy ti pagarigan dagiti amin a sub-paset a nairaman iti sumungbat a navbar a natemaan iti lawag nga automatiko a marpuog iti lg(dakkel) a breakpoint.

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

Daytoy a pagarigan ket agus-usar kadagiti klase ti utilidad ti likudan ( bg-light) ken espasyo ( me-auto, mb-2, mb-lg-0, ).me-2

Marka

Ti .navbar-brandmabalin a mayaplikar kadagiti kaaduan nga elemento, ngem ti maysa nga angkla ket kasayaatan nga agtrabaho, a kas dagiti sumagmamano nga elemento ket mabalin a makasapul kadagiti klase ti utilidad wenno dagiti kostumbre nga estilo.

Teksto

Inayon ti tekstom iti uneg ti maysa nga elemento nga addaan iti .navbar-brandklase.

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

Ladawan

Mabalinmo a sukatan ti teksto iti uneg ti .navbar-branditi <img>.

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

Ladawan ken teksto

Mabalinmo pay nga usaren ti sumagmamano a kanayonan a utilidad tapno mainayon ti ladawan ken teksto nga aggigiddan. Paliiwenyo ti pannakainayon ti .d-inline-blockken .align-text-topiti <img>.

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

Dagiti silpo ti nabigasion ti Navbar ket mangbangon kadagiti .navpagpilianmi nga addaan kadagiti bukodda a klase ti mangbalbaliw ken kasapulan ti panagusar kadagiti klase ti toggler para iti umno a sumungbat nga estilo. Ti panagnavigasion kadagiti navbar ket dumakkelto pay tapno mangsakup ti adu a horisontal nga espasio aginggana a mabalin tapno agtalinaed a natalged a naitunos dagiti linaon ti navbarmo.

Inayon ti .activeklase .nav-linktapno maipakita ti agdama a panid.

Pangngaasi a laglagipen a rumbeng met nga inayonmo ti aria-currentattribute iti aktibo .nav-link.

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

Ket gapu ta agusarkami kadagiti klase para kadagiti nav-mi, mabalinmo a liklikan nga interamente ti pamay-an a naibatay iti listaan ​​no kayatmo.

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

Mabalinmo met nga usaren dagiti dropdown iti navbar-mo. Dagiti dropdown a menu ket agkasapulan ti elemento ti panagbalkot para iti panagposision, isu a siguraduen nga agusar kadagiti agsina ken naisanglad nga elemento para .nav-itemken .nav-linkkas naipakita iti baba.

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

Dagiti Pormas

Ikabil dagiti nadumaduma a kontrol ti porma ken dagiti paset iti uneg ti navbar:

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

Dagus nga anak nga elemento ti .navbarpanagusar flex layout ken ag-default iti justify-content: space-between. Usaren dagiti kanayonan a flex utilities no kasapulan tapno maitunos daytoy a kababalin.

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

Agtrabaho met dagiti input group. No ti navbarmo ket maysa a sibubukel a porma, wenno kaaduan a porma, mabalinmo nga usaren ti <form>elemento a kas ti pagkargaan ken mangidulin ti sumagmamano nga HTML.

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

Nadumaduma a buton ti nasuportaran a kas paset dagitoy a porma ti navbar, met. Daytoy ket maysa pay a dakkel a palagip a dagiti bertikal a panagitunos a utilidad ket mabalin a mausar a mangitunos kadagiti nadumaduma a kadakkel nga elemento.

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

Teksto

Mabalin nga aglaon dagiti navbar kadagiti pedaso ti teksto babaen ti tulong ti .navbar-text. Daytoy a klase ket mangbalbaliw ti bertikal a panagtunos ken horisontal nga espasyo para kadagiti kuerdas ti teksto.

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

Ilaok ken iparis dagiti dadduma a paset ken utilities no kasapulan.

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

Dagiti eskema ti kolor

Baro iti v5.2.0: Ti panagtema ti Navbar ket napaandar itan babaen dagiti variable ti CSS ken .navbar-lightsaanen a maus-usar. Dagiti variable ti CSS ket maipakat iti .navbar, a default iti “nalawag” a langa, ken mabalin a maibabawi babaen ti .navbar-dark.

Dagiti tema ti Navbar ket nalaklaka ngem idi gapu ti kombinasion ti Bootstrap kadagiti Sass ken CSS a variable. Ti default ket ti “light navbar”-tayo a mausar kadagiti nalawag a kolor ti likudan, ngem mabalinmo met ti agaplikar .navbar-darkkadagiti natayengteng a kolor ti likudan. Kalpasanna, i-customize babaen kadagiti .bg-*utilities.

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

Dagiti Pagkargaan

Urayno saan a kasapulan, mabalinmo a baluten ti navbar iti a .containertapno maisentro daytoy iti panid–nupay laglagipen a kasapulan pay laeng ti akin-uneg a pagkargaan. Wenno mabalinmo ti manginayon ti maysa a pagkargaan iti uneg ti .navbartapno laeng maisentro ti linaon ti maysa a naipatakder wenno estatiko a ngato a navbar .

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

Usaren ti ania man kadagiti makasungbat a pagkargaan tapno baliwan no kasano kalawa ti pannakaiparang ti linaon iti navbar-mo.

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

Panagplastar

Usaren dagiti utilidad ti posisionmi tapno mangikabil kadagiti navbar kadagiti saan nga estatiko a posision. Pilien manipud iti naipatakder iti ngato, naikapet iti baba, naikapet iti ngato (ag-scroll a kadua ti panid agingga a makadanon iti ngato, sa agtalinaed sadiay), wenno nadekket iti baba (ag-scroll a kadua ti panid agingga a makadanon iti baba, sa agtalinaed idiay).

Dagiti natarimaan a navbar ket agus-usar ti position: fixed, a ti kayatna a sawen ket naguyod dagitoy manipud iti gagangay nga ayus ti DOM ken mabalin a kasapulan ti kostumbre a CSS (kas pagarigan, padding-topiti <body>) tapno malapdan ti panagtuon kadagiti sabali nga elemento.

html nga 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html nga 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html nga 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html nga 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html nga 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Panag-scroll

Inayon .navbar-nav-scrolliti maysa .navbar-nav(wenno sabali a sub-paset ti navbar) tapno mapalubosan ti bertikal a panag-scroll iti uneg dagiti mai-toggle a linaon ti narba a navbar. Babaen ti kasisigud, ti panag-scroll ket mangrugi iti 75vh(wenno 75% ti kangato ti viewport), ngem mabalinmo a baliwan dayta babaen ti lokal a kostumbre a tagikua ti CSS --bs-navbar-heightwenno dagiti kostumbre nga estilo. Kadagiti dakdakkel a viewport no ti navbar ket napalawa, ti linaon ket agparangto a kas ti ar-aramidenna iti default a navbar.

Pangngaasi a laglagipen a daytoy a kababalin ket umay nga addaan iti mabalin a pagdaksan ti overflow—no ti panangisaad overflow-y: auto(kasapulan tapno mai-scroll ti linaon ditoy), overflow-xket katupag ti auto, a mang-crop iti sumagmamano a horisontal a linaon.

Adda ditoy ti pagarigan a navbar nga agus -usar .navbar-nav-scrolliti style="--bs-scroll-height: 100px;", nga addaan kadagiti sumagmamano nga ekstra a margin a utilidad para iti kasayaatan nga espasyo.

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

Dagiti makasungbat a kababalin

Dagiti navbar ket mabalinda nga usaren ti .navbar-toggler, .navbar-collapse, ken .navbar-expand{-sm|-md|-lg|-xl|-xxl}dagiti klase tapno maikeddeng no kaano a ti linaonda ket agrupsa iti likudan ti maysa a buton. No maikuyog kadagiti dadduma a utilidad, nalaka laeng a pilien no kaano nga ipakita wenno ilemmeng dagiti partikular nga elemento.

Para kadagiti navbar a pulos a di ag-collapse, inayon ti .navbar-expandklase iti navbar. Para kadagiti navbar a kanayon a ma-collapse, saan nga inayon ti ania man a .navbar-expandklase.

Toggler nga

Dagiti toggler ti Navbar ket kannigid-a-naitunos babaen ti kasisigud, ngem no surotenda ti maysa nga elemento ti kabsat a kas ti .navbar-brand, automatiko a naitunosda iti adayo a kannawan. Ti panangbaliktad iti markup-mo ket mangbaliktad iti pannakaikabil ti toggler. Iti baba ket dagiti pagarigan ti nadumaduma nga estilo ti toggle.

Iti awan a .navbar-brandnaipakita iti kabassitan a breakpoint:

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

Iti nagan ti brand a naipakita iti kannigid ken toggler iti kannawan:

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

Adda toggler iti kannigid ken brand name iti kannawan:

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

Linaon iti ruar

No dadduma kayatmo nga usaren ti collapse plugin tapno mangtignay ti maysa nga elemento ti pagkargaan para iti linaon nga estruktural a nakatugaw iti ruar ti .navbar. Gapu ta agtrabaho ti plugin-tayo iti idken data-bs-targetpanagtunos, nalaka laeng nga aramiden dayta!

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

No aramidem daytoy, irekomendarmi ti panangiraman iti kanayonan a JavaScript tapno mayakar ti pokus a programatiko iti pagkargaan no malukatan dayta. No saan, dagiti agar-aramat ti teklado ken dagiti agar-aramat kadagiti makatulong a teknolohia ket nalabit a marigatanda a mangbirok ti baro a naipalgak a linaon - partikular no ti pagkargaan a nalukatan ket umay sakbay ti toggler iti estruktura ti dokumento. Isingasingmi pay a siguraduen a ti toggler ket addaan ti aria-controlsattribute, a mangitudo ti idti pagkargaan ti linaon. Iti teoria, daytoy ket mangipalubos kadagiti agar-aramat ti katulongan a teknolohia a lumlumtaw a direkta manipud iti toggler aginggana ti pagkargaan a kontroladona–ngem ti suporta para iti daytoy ket agdama a medyo patchy.

Offcanvas nga

Baliwam ti lumawlawa ken agruprupsa a navbarmo iti offcanvas a drawer nga addaan iti offcanvas a paset . Ipalawami nga agpada dagiti offcanvas a default nga estilo ken usarenmi dagiti .navbar-expand-*klasemi tapno mangpartuat ti dinamiko ken nalaka a maibagay a sidebar ti nabigasion.

Iti pagarigan iti baba, tapno mangpartuat ti offcanvas a navbar a kanayon a nadadael iti ballasiw dagiti amin a breakpoint, ikkaten a .navbar-expand-*naan-anay ti klase.

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

Tapno mangpartuat ti offcanvas a navbar a mangpalawa iti gagangay a navbar iti espesipiko a breakpoint a kas ti lg, usaren ti .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>

No agus-usar ti offcanvas iti nasipnget a navbar, ammom a mabalin a kasapulam ti maaddaan iti nasipnget a likudan iti linaon ti offcanvas tapno maliklikan ti panagbalin a di mabasa ti teksto. Iti pagarigan iti baba, inayonmi .navbar-darkken .bg-darkiti .navbar, .text-bg-darkiti .offcanvas, .dropdown-menu-darkiti .dropdown-menu, ken .btn-close-whiteiti .btn-closepara iti umno nga estilo nga addaan iti nasipnget nga offcanvas.

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

Dagiti Variable

Nainayon iti v5.2.0

Kas paset ti agbaliwbaliw nga asidegan dagiti CSS a variable ti Bootstrap, dagiti navbar ket agus-usar itan kadagiti lokal a CSS a variable on .navbarpara iti napasayaat nga aktual nga oras a panagpasayaat. Dagiti pateg para kadagiti variable ti CSS ket naikeddeng babaen ti Sass, isu a ti panagpasayaat ti Sass ket nasuportaran pay laeng, met.

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

Sumagmamano a kanayonan a variable ti CSS ket adda pay kadagiti .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);

Ti panagpasayaat babaen dagiti variable ti CSS ket mabalin a makita iti .navbar-darkklase a sadiay ket mangbalbaliwtayo kadagiti espesipiko a pateg a saan a manginayon kadagiti naduplikado a managpili ti 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)};

Sass dagiti variable

Dagiti variable para kadagiti amin a navbar:

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

Dagiti variable para iti nasipnget a 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 nga loop

Dagiti makasungbat a klase ti panagpalawa/panag-collapse ti navbar (kas pagarigan, .navbar-expand-lg) ket naitipon iti $breakpointsmapa ken napataud babaen ti maysa a loop iti 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;
          }
        }
      }
    }
  }
}