Buuka ku bigambo ebikulu Buuka ku docs navigation
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.
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.

<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" href="#" tabindex="-1" aria-disabled="true">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>

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

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.

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

Ekifaananyi

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

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" 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>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" 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.

<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" href="#" tabindex="-1" aria-disabled="true">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.

<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" href="#" tabindex="-1" aria-disabled="true">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.

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

Ffoomu

Teeka ebifuga foomu eby'enjawulo n'ebitundu mu 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>

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.

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

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

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

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.

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

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.

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

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

Ensengeka za langi

Okuteeka omulamwa ku navbar tekubangako kwangu olw’okugatta ebibiina by’omulamwa background-colorn’ebikozesebwa. Londako .navbar-lightokukozesebwa ne langi z’emabega ezitangaala, oba .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 navbar-light" 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 .

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

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

<nav class="navbar navbar-expand-lg navbar-light 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, oba stickied to the top (ezingulula n’olupapula okutuusa lwe lutuuka waggulu, olwo n’asigala 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.

Era weetegereze nti .sticky-topekozesa position: sticky, etawagirwa mu bujjuvu mu buli 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>

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.

<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" href="#" tabindex="-1" aria-disabled="true">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>

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:

<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" href="#" tabindex="-1" aria-disabled="true">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>

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

<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" href="#" tabindex="-1" aria-disabled="true">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>

Ku kkono olina toggler ate ku ddyo erinnya lya brand:

<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" href="#" tabindex="-1" aria-disabled="true">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>

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!

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

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Kyabulijo

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