U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Navbar

Dukumeenti iyo tusaalooyin loogu talagalay Bootstrap's awood badan, madax-wareejin ka jawaabaya, navbar. Waxaa ku jira taageerada summeynta, hagidda, iyo wax ka badan, oo ay ku jirto taageerada pluginkeenna burburka.

Boggaan

Sida ay u shaqeyso

Waa kuwan waxa aad u baahan tahay inaad ogaato ka hor intaadan bilaabin navbar:

  • Navbars-ku waxay u baahan yihiin in lagu duubo burburka jawaaba .navbarleh .navbar-expand{-sm|-md|-lg|-xl|-xxl}iyo fasallada nidaamka midabka .
  • Navbars iyo waxa ku jira waa dareere ahaan. U beddel weelka si aad u xaddiddo ballacooda jiifka ah siyaabo kala duwan.
  • U isticmaal kala dheeraynta iyo fasallada utility-ga dabacsan si aad u xakamayso kala dheeraynta iyo toosinta navbars gudahooda.
  • Navbars si toos ah ayey uga jawaabaan, laakiin si fudud ayaad u beddeli kartaa si aad taas u beddesho. Dabeecada jawaab celinta waxay ku xiran tahay Burburinta JavaScript plugin.
  • Hubi gelitaanka adigoo isticmaalaya shay <nav>ama, haddii la isticmaalayo curiye ka badan sida a <div>, ku dar role="navigation"navbar kasta si aad si cad ugu aqoonsato inuu yahay gobol calaamad u ah isticmaalayaasha tignoolajiyada caawinta.
  • Tilmaan shayga hadda jira adiga oo aria-current="page"u isticmaalaya bogga hadda jira ama aria-current="true"shayga hadda jira ee ku jira set.
Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Waxyaabaha la taageeray

Navbars waxay la yimaadaan taageero ku dhisan qayb yar oo ka kooban qaybo hoose. Ka dooro kuwa soo socda haddii loo baahdo:

  • .navbar-brandee shirkaddaada, alaabtaada, ama magaca mashruuca.
  • .navbar-navloogu talagalay socodka dhererka buuxa iyo fududaanta (ay ku jirto taageerada hoos u dhaca).
  • .navbar-togglersi loogu isticmaalo pluginkeena burburay iyo dabeecadaha kale ee leexinta .
  • Flex iyo kala dheeraynta utility ee nooc kasta oo kontaroolada iyo falalka.
  • .navbar-textsi loogu daro xardho qoraal ah oo toosan.
  • .collapse.navbar-collapsekooxaynta iyo qarinta waxa ku jira navbar barta waalidka.
  • Ku dar ikhtiyaari .navbar-scrollsi aad u dejiso oo u max-heightrog macluumaadka navbar balaariyay .

Waa kuwan tusaale dhammaan qaybaha-hoosaadka ee lagu daray navbar-fudud iftiin leh oo si toos ah ugu dunta meesha lg(weyn).

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

Tusaalahani waxa uu isticmaalayaa asalka ( bg-light) iyo kala dheeraynta ( my-2, my-lg-0, me-sm-0) my-sm-0fasalada utility.

Summada

Midda .navbar-brandwaxaa lagu dabaqi karaa inta badan walxaha, laakiin barroosintu si fiican ayey u shaqeysaa, maadaama walxaha qaarkood ay u baahan karaan fasalo utility ama qaabab gaar ah.

Qoraal

Ku dar qoraalkaaga cutub ka mid ah .navbar-brandfasalka.

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

Sawirka

Waxaad ku bedeli kartaa qoraalka .navbar-brandgudaha <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>

Sawirka iyo qoraalka

Waxa kale oo aad isticmaali kartaa adeegyo dheeraad ah si aad ugu darto sawir iyo qoraal isku mar. U fiirso ku-darka .d-inline-blockiyo .align-text-topdusha <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>

Isku xirka navbar navigation waxay ku dhismaan .navikhtiyaarkayaga fasalkooda wax ka beddelka waxayna u baahan yihiin isticmaalka fasallada toggler si habayn habboon looga jawaabo. Navigation in navbars sidoo kale kori doonaa si ay u qabsadaan inta badan oo bannaan oo siman inta suurtogalka ah si ay u dhawrto ka kooban navbar aad la siman yahay.

Ku dar .activefasalka .nav-linksi aad u muujiso bogga hadda jira.

Fadlan ogow inaad sidoo kale ku darto aria-currentsifada firfircoonida .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>

Iyo sababta oo ah waxaan u isticmaalnaa fasalada maraakiibtayada, waxaad ka fogaan kartaa habka liiska ku saleysan gabi ahaanba haddii aad rabto.

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

Waxa kale oo aad isticmaali kartaa hoos-u-dhacyada navbar-kaaga. Liiska hoos-u-dhaca wuxuu u baahan yahay cunsur wax lagu duubo si loo meeleeyo, markaa hubso inaad isticmaasho walxo gaar ah oo buul leh .nav-itemiyo .nav-linksida hoos ku cad.

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

Foomamka

Dhig kontaroolo kala duwan iyo qaybo kala duwan gudaha 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>

Cunsurada ilmaha ee degdega ah ee .navbaristicmaalka qaabaynta dabacsanaanta waxayna ku dhici doontaa justify-content: space-between. Isticmaal qalab dabacsan oo dheeri ah markaad u baahan tahay si aad u hagaajiso dhaqankan.

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

Kooxaha wax gelinta ayaa sidoo kale shaqeeya. Haddii navbaragu uu yahay foom dhan, ama badi foom, waxaad isticmaali kartaa <form>curiyaha weel ahaan oo waxaad kaydin kartaa 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>

Badhamada kala duwan ayaa sidoo kale lagu taageeraa qayb ka mid ah foomamka navbar. Tani waxay sidoo kale xusuusin weyn u tahay in utility-ka toosan ee toosan loo isticmaali karo in lagu toosiyo walxaha kala duwan.

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

Qoraal

Navbars waxaa laga yaabaa inay ku jiraan qaybo qoraal ah iyadoo la kaashanayo .navbar-text. Fasalkani wuxuu hagaajiyaa toosinta toosan iyo kala dheeraynta toosan ee xargaha qoraalka.

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

Ku qas oo ku dhig qaybaha kale iyo adeegyada sida loo baahdo.

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

Nidaamyada midabka

Dulucda navbar-ka waligeed ma fududa iyada oo ay ugu wacan tahay isku darka xiisadaha mawduuca iyo background-coloradeegyada. Ka dooro .navbar-lightisticmaalka midabada asalka ah ee iftiinka, ama .navbar-darkmidabada asalka madow. Ka dib, ku beddel .bg-*adeegyada.

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

Konteenarada

Inkasta oo aan loo baahnayn, waxaad ku duubi kartaa navbar a .containersi aad u dhex dhigto bogga -in kasta oo la soco in weel gudaha ah weli loo baahan yahay. Ama waxaad ku dari kartaa weel gudaha gudaha .navbaru dhexeya oo kaliya waxa ku jira navbar sare oo go'an ama taagan .

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

Isticmaal mid ka mid ah weelasha ka jawaaba si aad u bedesho inta ay le'eg tahay waxa ku jira navbarkaaga la soo bandhigay.

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

Meelaynta

Adeegso utility booskayaga si aad u dhigto navbars boosaska aan joogsiga lahayn. Ka dooro mid go'an ilaa sare, go'an xagga hoose, ama ku dheggan xagga sare (ku duub bogga ilaa ay ka gaadhayso xagga sare, ka dibna halkaa ku sii jir). Navbars go'an ayaa adeegsada position: fixed, taasoo la macno ah in laga soo jiiday socodka caadiga ah ee DOM waxaana laga yaabaa inay u baahdaan CSS caado ah (tusaale, padding-topon the <body>) si looga hortago isku dhafka walxaha kale.

Sidoo kale ogow .sticky-topisticmaalkaas position: sticky, kaas oo aan si buuxda u taageersanayn browser kasta .

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

Duubista

.navbar-nav-scrollKu dar .navbar-nav(ama qayb-hoosaadka navbar kale) si aad awood ugu yeelatid rog-rogid toosan oo ku dhex jirta waxyaabaha la rogrogi karo ee navbar burburay. Sida caadiga ah, 75vhrog-rogiddu waxay ku bilaabataa (ama 75% ee dhererka muuqaalka), laakiin waxaad taas kaga takhalusi kartaa hantida CSS ee deegaanka --bs-navbar-heightama qaababka caadiga ah. Goobaha waaweyn ee daawashada marka navbar la balaadhiyo, waxa ku jira waxa ay ka soo muuqan doonaan sida navbar caadiga ah.

Fadlan ogow in hab-dhaqankani uu la yimaado dib-u-dhac suurtagal ah oo ah — overflowmarka dejinta overflow-y: auto(loo baahan yahay in lagu rogo waxa ku jira halkan), overflow-xwaxa ay u dhigantaa auto, kaas oo goosan doona qayb toosan.

Waa kuwan tusaale navbar la isticmaalayo .navbar-nav-scroll, style="--bs-scroll-height: 100px;"oo wata qaar ka mid ah utility margin dheeraad ah ee kala dheeraynta ugu wanaagsan.

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

Dabeecadaha ka jawaaba

Navbars waxay isticmaali karaan .navbar-toggler, .navbar-collapse, iyo .navbar-expand{-sm|-md|-lg|-xl|-xxl}fasallo si ay u go'aamiyaan marka nuxurkoodu ku burburo badhanka gadaashiisa. Marka lagu daro tas-hiilaadka kale, waxaad si fudud u dooran kartaa marka aad muujinayso ama qarinayso waxyaabo gaar ah.

Navbars aan waligood dumin, ku dar .navbar-expandfasalka navbar-ka. Navbar-yada had iyo jeer burbura, ha ku darin wax .navbar-expandfasal ah.

Toggler

Togglers Navbar si toos ah ayay bidix u toosan yihiin, laakiin haddii ay raacaan walxaha walaalaha ah sida a .navbar-brand, waxay si toos ah ula toosi doonaan midigta fog. Dib u noqoshada calaamadayntaada waxay beddeli doontaa meelaynta toggler-ka. Hoos waxaa ah tusaalayaal qaababka beddelka ee kala duwan.

Iyadoo aan .navbar-brandlagu tusin meesha ugu yar:

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

Leh magaca summada oo ka muuqda bidix iyo toggler dhanka midig:

<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-rogeeyaha bidix iyo magaca summada ee midig:

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

Waxyaabaha dibadda

Mararka qaarkood waxaad rabtaa inaad isticmaasho plugin burburka si aad u kiciso curiyaha weelka ee nuxurka qaab ahaan u fadhiya meel ka baxsan .navbar. Sababtoo ah pluginkeena wuxuu ka shaqeeyaa isku id- data-bs-targetdhafka, taas si fudud ayaa loo sameeyaa!

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

Markaad tan sameyso, waxaan kugula talineynaa inaad ku darto JavaScript dheeraad ah si aad barnaamij ahaan diirada ugu wareejiso weelka marka la furo. Haddii kale, isticmaalayaasha kiiboodhka iyo isticmaalayaasha tignoolajiyada caawinta waxay u badan tahay inay ku adkaan doonto helista waxa cusub ee la daaha ka qaaday - gaar ahaan haddii weelka la furay uu ka hor yimaado beddelaha qaab dhismeedka dukumeentiga. Waxaan sidoo kale ku talinaynaa in la hubiyo in toggler-ku uu leeyahay sifada aria-controls, iyadoo tilmaamaysa idweelka ka kooban yahay. Aragti ahaan, tani waxay u oggolaanaysaa isticmaalayaasha tignoolajiyada caawinta inay si toos ah uga boodaan toggler-ka oo ay u gudbaan weelka ay gacanta ku hayso-laakin taageerada tani hadda aad bay u yar tahay.

Sass

Kala duwanaansho

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

Loop

Fasallada fidinta/burburinta navbar ka jawaaba (tusaale, .navbar-expand-lg) ayaa lagu daray $breakpointskhariidadda waxaana laga soo saaray wareegga 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;
        }
      }
    }
  }
}