Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Navbar

Ebiwandiiko n'ebyokulabirako by'omutwe gwa Bootstrap ogw'amaanyi, oguddamu, navbar. Mulimu obuwagizi bw’okussaako akabonero, okutambuliramu, n’ebirala, omuli okuwagira plugin yaffe ey’okugwa.

Ku muko guno

Engeri gye kikola

Bino by'olina okumanya nga tonnatandika na navbar:

  • Navbars zeetaaga okuzinga .navbarne .navbar-expand{-sm|-md|-lg|-xl|-xxl}ku responsive collapsing ne color scheme classes.
  • Navbars n'ebirimu biba fluid by default. Kyusa ekintu okussa ekkomo ku bugazi bwazo obw’okwebungulula mu ngeri ez’enjawulo.
  • Kozesa kiraasi zaffe eza spacing ne flex utility okufuga ebanga n'okulaganya munda mu navbars.
  • Navbars ziddamu by default, naye osobola bulungi okuzikyusa okukyusa ekyo. Enneeyisa y’okuddamu esinziira ku plugin yaffe eya Collapse JavaScript.
  • Kakasa nti kituukirirwa ng’okozesa <nav>ekintu oba, bw’oba ​​okozesa ekintu ekisingawo okuba eky’awamu nga a <div>, yongera role="navigation"ku buli navbar okukirambika mu bulambulukufu ng’ekitundu eky’omugaso eri abakozesa tekinologiya ayamba.
  • Laga ekintu ekiriwo kati ng'okozesa aria-current="page"ku lupapula oluliwo oba aria-current="true"ku kintu ekiriwo mu seti.
  • Ekipya mu v5.2.0: Navbars zisobola okubeera n'omulamwa n'enkyukakyuka za CSS eziriko scoped okutuuka ku .navbarbase class. .navbar-lightebadde evuddemu era .navbar-darkezzeemu okuwandiikibwa okusazaamu enkyukakyuka za CSS mu kifo ky'okugattako emisono emirala.
Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Ebirimu ebiwagirwa

Navbars zijja n’obuwagizi obuzimbibwamu obw’ebitundu ebitonotono ebitonotono. Londa ku bino wammanga nga bwe kyetaagisa:

  • .navbar-brandku kkampuni yo, ekintu kyo, oba erinnya lya pulojekiti.
  • .navbar-navolw’okutambulira mu buwanvu obujjuvu n’obuzito obutono (nga mw’otwalidde n’okuwagira ebifo ebikka wansi).
  • .navbar-togglerokukozesebwa ne plugin yaffe ey'okugwa n'enneeyisa endala ez'okukyusakyusa okutambuliramu .
  • Flex ne spacing utilities ku buli ffoomu okufuga n'ebikolwa.
  • .navbar-textolw’okugattako ennyiriri z’ebiwandiiko eziri wakati mu vertikal.
  • .collapse.navbar-collapseolw'okugatta n'okukweka ebirimu mu navbar okusinziira ku breakpoint y'omuzadde.
  • Okwongerako eky'okwesalirawo .navbar-scrollokuteekawo a max-heightn'okutambula ebigaziyiziddwa navbar ebirimu .

Wano waliwo ekyokulabirako ky’ebitundu byonna ebitonotono ebirimu mu navbar eriko omulamwa gw’ekitangaala eddamu egwa mu ngeri ey’otoma ku kifo lg(ekinene) eky’okumenya.

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

Ekyokulabirako kino kikozesa kiraasi z’omugaso ez’emabega ( bg-light) n’ebanga ( me-auto, mb-2, mb-lg-0, me-2).

Bulandi

The .navbar-brandesobola okukozesebwa ku elementi ezisinga obungi, naye anchor ekola bulungi, nga elements ezimu ziyinza okwetaaga utility classes oba custom styles.

Okuwandiika obubaka

Okwongerako ekiwandiiko kyo munda mu elementi ne .navbar-brandkiraasi.

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

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

Ekifaananyi

Osobola okukyusa ekiwandiiko ekiri munda .navbar-brandn'ossaamu <img>.

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

Ekifaananyi n’ebiwandiiko

Osobola n’okukozesa ebimu ku bikozesebwa ebirala okugattako ekifaananyi n’ekiwandiiko mu kiseera kye kimu. Weetegereze okugattibwako .d-inline-blockne .align-text-topku <img>.

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

Navbar navigation links zizimba ku .navoptions zaffe nga zirina modifier class yazo era zeetaaga okukozesa toggler classes for proper responsive styling. Okutambula mu navbars nakyo kijja kukula okutwala ekifo ekinene eky’okwebungulula nga bwe kisoboka okukuuma ebirimu byo mu navbar nga bikwatagana bulungi.

Okwongerako .activeekibiina .nav-linkokulaga omuko oguliwo kati.

Nsaba omanye nti era olina okwongerako aria-currentekintu ku active .nav-link.

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

Era olw’okuba tukozesa classes ku navs zaffe, osobola okwewala enkola eyesigamiziddwa ku list yonna bw’oba ​​oyagala.

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

Osobola n'okukozesa ebikka mu navbar yo. Menyu ezikka wansi zeetaaga ekintu ekizinga okuteeka mu kifo, kale kakasa nti okozesa ebintu eby’enjawulo n’ebiteekeddwa mu kisenge ku .nav-itemera .nav-linknga bwe kiragibwa wansi.

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

Ffoomu

Teeka ebifuga foomu eby'enjawulo n'ebitundu mu navbar:

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

Amangu ddala omwana elements of .navbaruse flex layout era ejja default ku justify-content: space-between. Kozesa ebikozesebwa ebirala ebiyitibwa flex utilities nga bwe kyetaagisa okutereeza enneeyisa eno.

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

Ebibinja by’ebiyingizibwa nabyo bikola. Singa navbar yo eba form yonna, oba okusinga form, osobola okukozesa <form>element nga container n'otereka HTML ezimu.

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

Butaamu ez'enjawulo ziwagirwa ng'ekitundu ku ffoomu zino eza navbar, nazo. Kino era kijjukiza kinene nti ebikozesebwa eby’okulaganya okwesimbye bisobola okukozesebwa okulaganya ebintu eby’obunene obw’enjawulo.

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

Okuwandiika obubaka

Navbars ziyinza okubaamu ebitundutundu by'ebiwandiiko nga biyambibwako .navbar-text. Kiraasi eno etereeza okulaganya okw’okwesimbye n’okulaga ebanga ery’okwesimbye ku nnyiriri z’ebiwandiiko.

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

Tabula era okwatagane n’ebitundu ebirala n’ebikozesebwa nga bwe kyetaagisa.

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

Ensengeka za langi

Ekipya mu v5.2.0: Navbar theming kati ekozesebwa enkyukakyuka za CSS era .navbar-lightebadde evudde ku mulamwa. Enkyukakyuka za CSS zikozesebwa ku .navbar, nga zisookerwako ku ndabika ya “ekitangaala”, era zisobola okukyusibwa ne .navbar-dark.

Emiramwa gya Navbar gyangu okusinga bwe kyali kibadde olw’okugatta kwa Bootstrap enkyukakyuka za Sass ne CSS. Ekisookerwako ye “light navbar” yaffe okukozesebwa ne langi z’emabega ezitangaala, naye osobola n’okusaba .navbar-darklangi z’emabega enzirugavu. Oluvannyuma, customize .bg-*n'ebikozesebwa.

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

Ebintu ebiteekebwamu ebintu

Newankubadde nga tekyetaagisa, osobola okuzinga navbar mu a .containerokugiteeka wakati ku lupapula–wadde nga weetegereze nti ekintu eky’omunda kikyali kyetaagisa. Oba oyinza okugattako ekintu munda mu .navbarkussa wakati byokka ebirimu mu navbar ey'okungulu etali ya kukyukakyuka oba etali ya kukyukakyuka .

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

Kozesa ekimu ku bikozesebwa ebiddamu okukyusa obugazi ebirimu mu navbar yo gye biragiddwa.

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

Okuteekebwa mu kifo

Kozesa ebikozesebwa byaffe eby'ekifo okuteeka navbars mu bifo ebitali bikyukakyuka. Londa okuva ku fixed to the top, fixed to the bottom, stickied to the top (okuzingulula n’olupapula okutuusa lwe lutuuka waggulu, olwo n’esigala awo), oba okunywerera wansi (okuzingulula n’olupapula okutuusa lwe lutuuka wansi, olwo n’esigala awo).

Fixed navbars use position: fixed, ekitegeeza nti ziggyibwa okuva mu ntambula eya bulijjo eya DOM era ziyinza okwetaaga CSS eya bulijjo (okugeza, padding-topku <body>) okuziyiza okukwatagana n'ebintu ebirala.

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

Okuyiringisibwa

Yongera .navbar-nav-scrollku .navbar-nav(oba ekitundu ekirala ekya navbar sub-component) okusobozesa okutambula okwesimbye munda mu birimu ebikyusibwakyusibwa ebya navbar egudde. Nga bwekiba, okutambula kutandika ku 75vh(oba 75% ku buwanvu bw'ekifo eky'okulaba), naye osobola okusazaamu ekyo n'ekintu eky'ennono ekya CSS eky'omu kitundu --bs-navbar-heightoba emisono egy'ennono. Ku bifo ebinene eby'okulaba nga navbar egaziyiziddwa, ebirimu bijja kulabika nga bwe bikola mu navbar esookerwako.

Nsaba omanye nti enneeyisa eno ejja n’ekizibu ekiyinza okubaawo ekya overflow—nga okuteeka overflow-y: auto(kyetaagisa okutambula ebirimu wano), overflow-xkyenkanawa ne auto, ekijja okusala ebimu ku birimu eby’okwebungulula.

Wano waliwo ekyokulabirako navbar ekozesa .navbar-nav-scrollne style="--bs-scroll-height: 100px;", n'ebimu ku margin utilities ez'enjawulo okusobola okubeera ebanga erisinga obulungi.

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

Enneeyisa eziddamu

Navbars zisobola okukozesa .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl|-xxl}classes okuzuula ddi ebirimu byabwe lwe bigwa emabega wa button. Bw’ogatta n’ebikozesebwa ebirala, osobola bulungi okulonda ddi lw’olina okulaga oba okukweka ebintu ebimu.

Ku navbar ezitagwa, yongera ku .navbar-expandkiraasi ku navbar. Ku navbars bulijjo ezigwa, togattako .navbar-expandclass yonna.

Omukyusakyusa

Navbar togglers are left-aligned by default, naye singa zigoberera elementi ya muganda nga a .navbar-brand, zijja kusengekebwa mu ngeri ey'otoma ku ddyo ennyo. Okuzza emabega markup yo kijja kuzzaawo okuteekebwa kwa toggler. Wansi waliwo ebyokulabirako by’emisono egy’enjawulo egy’okukyusakyusa.

Nga tewali .navbar-branderagiddwa ku kifo ekisinga obutono eky’okumenya:

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

Nga erinnya lya brand liragiddwa ku kkono ate toggler ku ddyo:

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

Ku kkono olina toggler ate ku ddyo erinnya lya brand:

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

Ebirimu eby’ebweru

Oluusi oyagala okukozesa collapse plugin okutandika ekintu ekirimu ebirimu ebituula mu nsengeka ebweru wa .navbar. Olw'okuba plugin yaffe ekola ku idn'okukwatagana data-bs-target, ekyo kyangu okukolebwa!

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

Bw’okola kino, tusaba okussaamu JavaScript endala okutambuza essira mu pulogulaamu mu kibya nga kigguddwawo. Bwe kitaba ekyo, abakozesa keyboard n'abakozesa tekinologiya ayamba bajja kusanga obuzibu okuzuula ebirimu ebipya ebibikkuddwa - naddala singa ekintu ekyaggulwawo kijja nga toggler tannabaawo mu nsengeka y'ekiwandiiko. Era tukuwa amagezi okukakasa nti toggler erina aria-controlsattribute, nga esonga ku the idof the content container. Mu ndowooza, kino kisobozesa abakozesa tekinologiya ayamba okubuuka butereevu okuva ku toggler okutuuka ku konteyina gy’efuga–naye obuwagizi eri kino mu kiseera kino buba bwa bitundutundu nnyo.

Okuva ku kanvaasi

Fuula navbar yo egaziwa n'okugwa mu ddulaaya etali ya kanvaasi n'ekitundu ekitali ku kanvaasi . Tugaziya emisono gyombi egy’okusooka egya offcanvas era ne tukozesa .navbar-expand-*kiraasi zaffe okukola ebbaala y’okutambuliramu ekyukakyuka era ekyukakyuka.

Mu kyokulabirako wansi, okukola offcanvas navbar bulijjo egwa mu breakpoints zonna, lekayo .navbar-expand-*kiraasi yonna.

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

Okukola navbar ya offcanvas egaziwa mu navbar eya bulijjo ku breakpoint eyeetongodde nga lg, kozesa .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>

Bw’oba ​​okozesa offcanvas mu navbar enzirugavu, kimanye nti oyinza okwetaaga okuba n’ennyuma enzirugavu ku birimu offcanvas okwewala ebiwandiiko okufuuka ebitasoma. Mu kyokulabirako wansi, twongerako .navbar-darkne .bg-darkku .navbar, .text-bg-darkku .offcanvas, .dropdown-menu-darkku .dropdown-menu, ne .btn-close-whiteku okusobola .btn-closeokukola sitayiro entuufu ne offcanvas enzirugavu.

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

CSS

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, navbars kati zikozesa enkyukakyuka za CSS ez'omu kitundu ku .navbarfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Ebimu ku bikyukakyuka bya CSS ebirala nabyo biri ku .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);

Okulongoosa okuyita mu nkyukakyuka za CSS kuyinza okulabibwa ku .navbar-darkkiraasi gye tusazaamu emiwendo egyenjawulo awatali kwongerako bisunsuzi bya CSS ebikoppeddwa.

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

Enkyukakyuka za Sass

Enkyukakyuka za navbar zonna:

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

Enkyukakyuka za navbar enzirugavu :

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

Responsive navbar expand/collapse classes (okugeza, .navbar-expand-lg) zigattibwa ne $breakpointsmaapu ne zikolebwa okuyita mu loopu mu 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;
          }
        }
      }
    }
  }
}