in English

Navbar

Dokimantasyon ak egzanp pou header navigasyon pwisan Bootstrap a, navbar la. Gen ladan sipò pou mak, navigasyon, ak plis ankò, ki gen ladan sipò pou plugin efondreman nou an.

Nan paj sa a

Ki jan li fonksyone

Men sa ou bezwen konnen anvan ou kòmanse ak navbar la:

Navbars mande pou yon anbalaj .navbarak .navbar-expand{-sm|-md|-lg|-xl|-xxl}pou efondreman reponn ak klas konplo koulè .
Navbars ak sa ki ladan yo likid pa default. Chanje veso a pou limite lajè orizontal yo nan diferan fason.
Sèvi ak espas sèvis piblik nou yo ak flex klas pou kontwole espas ak aliyman nan navbars.
Navbars yo reponn pa default, men ou ka fasilman modifye yo pou chanje sa. Konpòtman reponn depann de Plugin JavaScript Collapse nou an.
Asire aksè a lè w sèvi ak yon <nav>eleman oswa, si w ap itilize yon eleman ki pi jenerik tankou yon <div>, ajoute yon role="navigation"nan chak navbar pou idantifye li klèman kòm yon rejyon enpòtan pou itilizatè teknoloji asistans yo.
Endike atik aktyèl la lè w itilize aria-current="page"pou paj aktyèl la oswa aria-current="true"pou atik aktyèl la nan yon seri.

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Kontni sipòte

Navbars vini ak sipò entegre pou yon ti ponyen sub-konpozan. Chwazi nan sa ki annapre yo jan sa nesesè:

.navbar-brandpou konpayi ou, pwodwi, oswa non pwojè ou.
.navbar-navpou yon navigasyon plen wotè ak lejè (ki gen ladan sipò pou dropdowns).
.navbar-togglerpou itilize ak Plugin efondreman nou an ak lòt konpòtman baskil navigasyon .
Flex ak espas sèvis piblik pou nenpòt kontwòl fòm ak aksyon.
.navbar-textpou ajoute strings tèks ki santre vètikal.
.collapse.navbar-collapsepou gwoupman ak kache kontni navbar pa yon pwen breakpoint paran.
Ajoute yon opsyonèl .navbar-scrollpou mete yon max-heightak woulo liv elaji navbar kontni .

Isit la se yon egzanp tout sou-konpozan ki enkli nan yon navbar ki reponn ak tematik limyè ki otomatikman tonbe nan lg(gwo) breakpoint la.

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

Egzanp sa a sèvi ak klas sèvis piblik background ( bg-light) ak espas ( my-2, my-lg-0, me-sm-0, my-sm-0).

Mak

Yo .navbar-brandka aplike nan pifò eleman, men yon jete lank travay pi byen, kòm kèk eleman ta ka mande pou klas sèvis piblik oswa estil koutim.

Tèks

Ajoute tèks ou nan yon eleman ak .navbar-brandklas la.

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

Imaj

Ou ka ranplase tèks la nan .navbar-brandak yon <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>

Imaj ak tèks

Ou kapab tou sèvi ak kèk sèvis piblik adisyonèl pou ajoute yon imaj ak tèks an menm tan. Remake adisyon .d-inline-blockak .align-text-topsou <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

Lyen navigasyon Navbar yo bati sou .navopsyon nou yo ak pwòp klas modifye yo epi yo mande pou yo sèvi ak klas toggler pou yon fason apwopriye ki reponn. Navigasyon nan navbars ap grandi tou pou okipe plis espas orizontal ke posib pou kenbe kontni navbar ou byen aliyen.

Ajoute .activeklas la .nav-linkpou endike paj aktyèl la.

Tanpri sonje ke ou ta dwe ajoute tou aria-currentatribi a sou aktif la .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>

Epi paske nou itilize klas pou nav nou yo, ou ka evite apwòch ki baze sou lis antyèman si ou renmen.

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

Ou kapab tou itilize dropdowns nan navbar ou. Meni dropdown mande pou yon eleman anbalaj pou pwezante, kidonk asire w ke ou sèvi ak eleman separe ak enbrike pou .nav-itemak .nav-linkjan yo montre anba a.

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

Fòm

Mete divès kalite kontwòl fòm ak eleman nan yon 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>

Eleman timoun imedyat nan .navbaritilize flex layout epi yo pral default nan justify-content: space-between. Sèvi ak lòt sèvis piblik fleksib jan sa nesesè pou ajiste konpòtman sa a.

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

Gwoup antre travay, tou. Si navbar ou a se yon fòm antye, oswa sitou yon fòm, ou ka itilize <form>eleman an kòm veso a epi sove kèk 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>

Yo sipòte plizyè bouton kòm yon pati nan fòm navbar sa yo tou. Sa a se tou yon gwo rapèl ke sèvis piblik aliyman vètikal yo ka itilize aliman eleman diferan gwosè.

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

Tèks

Navbars ka genyen ti moso tèks avèk èd .navbar-text. Klas sa a ajiste aliyman vètikal ak espas orizontal pou fisèl tèks yo.

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

Melanje ak matche ak lòt konpozan ak sèvis piblik jan sa nesesè.

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

Koulè rapid

Tematik navbar la pa janm te pi fasil gras a konbinezon tematik klas ak background-colorsèvis piblik yo. Chwazi nan .navbar-lightpou itilize ak koulè background limyè, oswa .navbar-darkpou koulè background nwa. Lè sa a, Customize ak .bg-*sèvis piblik.

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

Kontenè

Malgre ke li pa obligatwa, ou ka vlope yon navbar nan yon .containersantre li sou yon paj - menm si sonje ke yon veso enteryè toujou obligatwa. Oswa ou ka ajoute yon veso andedan .navbarpou sèlman santre sa ki nan yon navbar fiks oswa estatik .

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

Sèvi ak nenpòt nan resipyan ki reponn a chanje lajè kontni an nan navbar ou prezante.

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

Plasman

Sèvi ak sèvis piblik pozisyon nou yo pou mete navbars nan pozisyon ki pa estatik. Chwazi nan fiks nan tèt la, fiks nan anba a, oswa kolan nan tèt la (defile ak paj la jiskaske li rive nan tèt la, Lè sa a, rete la). Navbars fiks yo sèvi ak position: fixed, sa vle di yo retire nan koule nòmal DOM la epi yo ka mande CSS koutim (egzanp, padding-topsou <body>) pou anpeche sipèpoze ak lòt eleman.

Epitou sonje ke .sticky-topitilize position: sticky, ki pa konplètman sipòte nan chak navigatè .

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

Defile

Ajoute .navbar-nav-scrollnan yon .navbar-nav(oswa lòt sub-konpozan navbar) pou pèmèt defile vètikal nan sa ki ka chanje nan yon navbar ki tonbe. Pa defo, defile anvwaye nan 75vh(oswa 75% nan wotè a viewport), men ou ka pase sou desizyon sa ak pwopriyete lokal la CSS koutim --bs-navbar-heightoswa estil koutim. Nan pi gwo pòtay lè navbar la elaji, kontni ap parèt menm jan li fè sa nan yon navbar default.

Tanpri sonje ke konpòtman sa a vini ak yon dezavantaj potansyèl nan overflow- lè anviwònman overflow-y: auto(obligasyon pou defile kontni an isit la), overflow-xse ekivalan a auto, ki pral koupe kèk kontni orizontal.

Isit la nan yon egzanp navbar lè l sèvi avèk .navbar-nav-scrollak style="--bs-scroll-height: 100px;", ak kèk sèvis piblik Marge siplemantè pou espas pi gwo.

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

Konpòtman ki reponn

Navbars ka itilize .navbar-toggler, .navbar-collapse, ak .navbar-expand{-sm|-md|-lg|-xl|-xxl}klas pou detèmine lè kontni yo tonbe dèyè yon bouton. Nan konbinezon ak lòt sèvis piblik, ou ka fasilman chwazi lè yo montre oswa kache eleman patikilye.

Pou navbars ki pa janm tonbe, ajoute .navbar-expandklas la sou navbar la. Pou navbars ki toujou tonbe, pa ajoute okenn .navbar-expandklas.

Toggler

Navbar togglers yo aliye sou bò gòch pa default, men yo ta dwe swiv yon eleman frè ak sè tankou yon .navbar-brand, yo pral otomatikman dwe aliyen sou bò dwat la. Ranvèse maketing ou a pral ranvèse plasman toggler la. Anba a se egzanp diferan estil baskil.

San yo pa .navbar-brandmontre nan pwen rupture ki pi piti a:

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

Avèk yon non mak yo montre sou bò gòch la ak baskile sou bò dwat la:

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

Avèk yon baskil sou bò gòch la ak non mak sou bò dwat la:

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

Kontni ekstèn

Pafwa ou vle sèvi ak plugin efondreman an pou deklanche yon eleman veso pou kontni ki estriktirèl chita deyò nan .navbar. Paske Plugin nou an ap travay sou la idak data-bs-targetmatche, sa fasil fè!

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>

Lè ou fè sa, nou rekòmande pou mete plis JavaScript pou deplase konsantre nan pwogramasyon nan veso a lè li louvri. Sinon, itilizatè klavye yo ak itilizatè teknoloji asistans yo pral gen anpil chans pou yo jwenn kontni ki fèk revele a - sitou si veso ki te louvri a vini anvan baskil la nan estrikti dokiman an. Nou rekòmande tou pou asire w ke toggler a gen aria-controlsatribi a, lonje dwèt sou idveso kontni an. Nan teyori, sa pèmèt itilizatè teknoloji asistans yo sote dirèkteman nan baskile a nan veso li kontwole a, men sipò pou sa a se kounye a byen inégal.

Offcanvas

Transfòme navbar agrandi ak tonbe nan yon tiwa offcanvas ak plugin offcanvas la. Nou pwolonje tou de estil yo default offcanvas epi itilize klas nou .navbar-expand-*yo pou kreye yon ba navigasyon dinamik ak fleksib.

Nan egzanp ki anba la a, pou kreye yon navbar offcanvas ki toujou tonbe nan tout pwen rupture, kite .navbar-expand-*klas la nèt.

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

Pou kreye yon navbar offcanvas ki elaji nan yon navbar nòmal nan yon pwen espesifik tankou lg, sèvi ak .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

Varyab

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

Bouk

Navbar reponn klas elaji/effondreman (eg, .navbar-expand-lg) yo konbine avèk $breakpointskat la epi yo pwodwi atravè yon bouk nan 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;
        }
      }
    }
  }
}