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.

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 i- scroll ti 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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

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 kasapulan dagiti klase ti utilidad wenno dagiti kostumbre nga estilo.

Teksto

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

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

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Ladawan

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

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Dagiti Pormas

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

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.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

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.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Dagiti eskema ti kolor

Ti panangtema ti navbar ket saan pay a pulos a nalaklaka gapu ti kombinasion dagiti klase ti panagtema ken background-colordagiti utilidad. Pilien manipud .navbar-lightiti mausar kadagiti nalawag a kolor ti likudan, wenno .navbar-darkpara kadagiti 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 navbar-light" 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 .

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

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

<nav class="navbar navbar-expand-lg navbar-light 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, naipatakder iti baba, wenno nadekket iti ngato (ag-scroll a kadua ti panid agingga a makadanon iti ngato, sa agtalinaed sadiay). 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.

Imutektekanyo pay nga .sticky-topagus-usar position: sticky, a saan a naan-anay a nasuportaran iti tunggal maysa a browser .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Dagiti makasungbat a kababalin

Mabalin nga usaren dagiti navbar ti .navbar-toggler, .navbar-collapse, ken .navbar-expand{-sm|-md|-lg|-xl|-xxl}dagiti klase tapno maikeddeng no kaano a marpuog ti linaonda 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:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Adda toggler iti kannigid ken brand name iti kannawan:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Linaon iti ruar

No dadduma kayatmo nga usaren ti plugin ti panagreggaay tapno mangtignay ti elemento ti paglaon 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!

Collapsed content

Toggleable via the navbar brand.

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

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 drawer babaen ti offcanvas plugin. 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.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

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-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass nga

Dagiti Variable

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Silo

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 lubong 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: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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