Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Navbar

Matsalwa na swikombiso swa nhloko ya matimba ya ku famba-famba ya Bootstrap, leyi hlamulaka, navbar. Ku katsa na nseketelo wa branding, navigation, na swin’wana, ku katsa na nseketelo wa plugin ya hina ya ku wa.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Hi leswi u faneleke ku swi tiva u nga si sungula ku tirhisa navbar:

  • Navbars yi lava ku phutsela .navbarna .navbar-expand{-sm|-md|-lg|-xl|-xxl}for responsive collapsing na titlilasi ta xikimi xa mihlovo .
  • Ti-navbar na leswi nga endzeni ka tona swi khuluka hi ku tiyimisela. Cinca xigwitsirisi ku hunguta ku anama ka swona loku nga etlhelo hi tindlela to hambana.
  • Tirhisa titlilasi ta hina ta vukorhokeri bya ku hambana na ku flex ku lawula ku hambana na ku ringanisa endzeni ka ti-navbar.
  • Ti-navbar ti hlamula hi ku tiyimisela, kambe u nga ti cinca hi ku olova leswaku u cinca sweswo. Mahanyelo yo hlamula ya titshege hi xiengetelo xa hina xa Collapse JavaScript.
  • Tiyisisa ku fikelela hi ku tirhisa <nav>elemente kumbe, loko u tirhisa elemente yo angarhela swinene yo fana na a <div>, engetela a role="navigation"eka navbar yin’wana na yin’wana ku yi kombisa hi ku kongoma tanihi ndhawu ya xikombiso xa misava eka vatirhisi va thekinoloji yo pfuneta.
  • Kombisa nchumu wa sweswi hi ku tirhisa aria-current="page"eka tluka ra sweswi kumbe aria-current="true"eka nchumu wa sweswi eka sete.
  • Leswintshwa eka v5.2.0: Ti-Navbar ti nga va na theme hi swilo leswi cinca-cincaka swa CSS leswi nga na xikalo eka .navbartlilasi ya le hansi. .navbar-lightyi herisiwile naswona .navbar-darkyi tsariwile nakambe ku tlula swilo leswi cinca-cincaka swa CSS ematshan’weni yo engetela switayele leswi engetelekeke.
Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Swilo leswi seketeriwaka

Ti-navbar ti ta na nseketelo lowu akiweke endzeni wa swiphemu-ntsongo swi nga ri swingani. Hlawula eka leswi landzelaka loko swi laveka:

  • .navbar-brandeka khampani ya wena, xiendliwa kumbe vito ra phurojeke.
  • .navbar-navku kuma ku famba loku tlakukeke loku heleleke ni loku olovaka (ku katsa ni nseketelo wa swilo leswi nga ehansi).
  • .navbar-togglerku tirhisiwa na plugin ya hina ya collapse na mahanyelo man’wana yo cinca-cinca ya ku famba-famba .
  • Switirhisiwa swa Flex na spacing eka vulawuri byihi na byihi bya xivumbeko na swiendlo.
  • .navbar-textku engetela tintambhu ta matsalwa leti nga exikarhi hi ku kongoma.
  • .collapse.navbar-collapseku hlengeleta na ku tumbeta swilo swa navbar hi breakpoint ya mutswari.
  • Engetela xihlawuhlawu .navbar-scrollku veka a max-heightna ku rhendzeleka na nhundzu leyi andlariweke ya navbar .

Hi lexi xikombiso xa swiphemu-ntsongo hinkwaswo leswi katsiweke eka navbar leyi hlamulaka ya nhlokomhaka ya ku vonakala leyi hi yoxe yi wa eka ndhawu lgyo wisa (leyikulu).

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>

Xikombiso lexi xi tirhisa titlilasi ta vukorhokeri bya le ndzhaku ( bg-light) na ku hambana ( me-auto, mb-2, mb-lg-0, ).me-2

Muxaka

The .navbar-brandyi nga tirhisiwa eka swiaki swo tala, kambe anchor yi tirha kahle, tanihileswi swiaki swin’wana swi nga ha lavaka titlilasi ta vukorhokeri kumbe switayele swa ntolovelo.

Tsalwa

Engetela tsalwa ra wena endzeni ka elemente na .navbar-brandtlilasi.

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>

Xivumbeko

U nga siva tsalwa leri nga endzeni ka .navbar-brandhi <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>

Xifaniso na tsalwa

U nga ha tlhela u tirhisa switirhisiwa swin’wana leswi engetelekeke leswaku u engetela xifaniso ni tsalwa hi nkarhi wun’we. Xiya ku engeteriwa ka .d-inline-blockna .align-text-tople ka <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>

Swihlanganisi swa ku famba-famba swa Navbar swi aka eka .navswihlawulekisi swa hina hi tlilasi ya swona ya mucinci naswona swi lava ku tirhisiwa ka titlilasi ta toggler ku kuma xitayili lexi hlamulaka lexi faneleke. Ku famba-famba eka ti-navbar swi ta tlhela swi kula ku teka ndhawu yo tala leyi nga etlhelo hilaha swi nga kotekaka hakona ku hlayisa swilo swa wena swa navbar swi ringanise hi ndlela leyi sirhelelekeke.

Engetela .activetlilasi eka .nav-linkku kombisa tluka ra sweswi.

Hi kombela u xiya leswaku u fanele ku tlhela u engetela aria-currentxihlawulekisi eka lexi tirhaka .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>

Naswona hikuva hi tirhisa titlilasi eka ti-nav ta hina, u nga papalata endlelo leri sekeriweke eka nxaxamelo hi ku helela loko u swi tsakela.

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>

U nga ha tlhela u tirhisa swilo leswi nga ehansi eka navbar ya wena. Timenyu ta dropdown ti lava element yo phutsela eka xiyimo, kutani tiyisisa leswaku u tirhisa swiaki leswi hambaneke na leswi pfanganisiweke eka .nav-itemna .nav-linktanihilaha swi kombisiweke hakona laha hansi.

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>

Swivumbeko

Veka swilawuri swo hambana swa fomo na swiphemu endzeni ka 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>

Swiaki swa n'wana swa xihatla swa ku .navbartirhisa flex layout naswona swi ta default eka justify-content: space-between. Tirhisa switirhisiwa swo engetela swa flex tanihilaha swi lavekaka hakona ku lulamisa mahanyelo lawa.

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>

Mintlawa ya swingheniso ya tirha, na yona. Loko navbar ya wena yi ri fomo hinkwayo, kumbe ngopfu-ngopfu fomo, u nga tirhisa <form>elemente tanihi xikhomela-ndhawu ivi u hlayisa HTML yin’wana.

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>

Swikomba-nkarhi swo hambana-hambana swi seketeriwa tanihi xiphemu xa swivumbeko leswi swa navbar, na swona. Leswi switlhela swiva xitsundzuxo lexikulu xa leswaku switirhisiwa swa vertical alignment swinga tirhisiwa ku ringanisa swiaki swa vukulu byo hambana.

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>

Tsalwa

Ti-navbar ti nga ha va ni swiphemu swa matsalwa hi ku pfuniwa hi .navbar-text. Tlilasi leyi yi lulamisa ku ringanisa loku yimisiweke na ku hambana loku nga etlhelo ka tintambhu ta matsalwa.

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

Hlanganisa na ku fambisana na swiphemu swin’wana na switirhisiwa loko swi laveka.

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>

Swikimi swa mihlovo

Leswintshwa eka v5.2.0: Navbar theming sweswi yi fambisiwa hi swilo leswi cinca-cincaka swa CSS naswona .navbar-lightyi nga ha tirhisiwi. Swilo leswi cinca-cincaka swa CSS swi tirhisiwa eka .navbar, swi nga ha endleka swi languteka hi “ku vonakala”, naswona swi nga ha tlurisiwa hi .navbar-dark.

Titheme ta Navbar ti olova ku tlula rini na rini hikwalaho ka ku hlanganisiwa ka Bootstrap ka swilo leswi cinca-cincaka swa Sass na CSS. Xihlawulekisi i “navbar ya hina yo voninga” leyi tirhisiwaka ni mihlovo yo vonikela ya le ndzhaku, kambe u nga ha tlhela u endla xikombelo .navbar-darkxa mihlovo ya le ndzhaku ya ntima. Kutani, customize hi .bg-*switirhisiwa.

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

Swikhomela-ndhawu

Hambi leswi swi nga lavekiki, u nga phutsela navbar hi a .containerku yi hlanganisa exikarhi eka pheji–hambi leswi xiyaka leswaku xigwitsirisi xa le ndzeni xa ha laveka. Kumbe u nga engetela xigwitsirisi endzeni ka .navbarku hlanganisa ntsena leswi nga endzeni ka navbar ya le henhla leyi nga cinciki kumbe leyi nga cinciki .

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>

Tirhisa xin’wana na xin’wana xa swikhomela-ndhawu leswi hlamulaka ku cinca ndlela leyi swilo leswi nga eka navbar ya wena swi nyikeriwaka ha yona.

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

Ku vekiwa ka swilo

Tirhisa switirhisiwa swa hina swa xiyimo ku veka ti-navbar eka swiyimo leswi nga cinciki. Hlawula eka leswi nga tshamisekangiki ku ya ehenhla, leswi khomiweke ehansi, leswi namarhetiwe ehenhla (swiphepherhele ni tluka ku kondza ri fika ehenhla, ivi swi tshama kwalaho), kumbe swi namarhela ehansi (swiphepherhele ni tluka ku kondza ri fika ehansi, ivi swi tshama kwalaho).

Ti navbar leti nga cinciki ti tirhisa position: fixed, leswi vulaka leswaku ti kokiwa eka ku khuluka ka ntolovelo ka DOM naswona ti nga ha lava CSS ya ntolovelo (xikombiso, padding-topeka <body>) ku sivela ku hlangana na swiaki swin’wana.

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>

Ku rhendzeleka

Engetela .navbar-nav-scrolleka .navbar-nav(kumbe xiphemu xin’wana xa navbar) ku endla leswaku ku rhendzeleka loku yimisiweke endzeni ka swilo leswi cinca-cincaka swa navbar leyi tshovekeke. Hi ku tiyimisela, ku rhendzeleka ku nghena eka 75vh(kumbe 75% wa ku tlakuka ka xivono), kambe u nga tlula sweswo hi nhundzu ya ntolovelo ya CSS ya laha kaya --bs-navbar-heightkumbe switayele swa ntolovelo. Eka swivono leswikulu loko navbar yi andlariwile, nhundzu yi ta humelela tanihilaha swi endlaka hakona eka navbar ya ntolovelo.

Hi kombela u xiya leswaku mahanyelo lawa ya ta na xiphiqo lexi nga vaka kona xa overflow—loko ku veka overflow-y: auto(ku laveka ku rhendzeleka ka leswi nga endzeni laha), overflow-xku ringana na auto, leswi nga ta tsema swilo swin’wana leswi nga etlhelo.

Hi lexi xikombiso xa navbar lexi tirhisaka .navbar-nav-scrollna style="--bs-scroll-height: 100px;", na switirhisiwa swin’wana swo engetela swa margin swa ku hambana lokunene.

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>

Mahanyelo yo hlamula

Ti-navbar ti nga tirhisa .navbar-toggler, .navbar-collapse, na .navbar-expand{-sm|-md|-lg|-xl|-xxl}titlilasi ku kumisisa loko nhundzu ya tona yi wa endzhaku ka buti. Loko swi hlanganisiwa ni switirhisiwa swin’wana, u nga hlawula hi ku olova leswaku u ta kombisa rini kumbe u tumbeta swiaki swo karhi.

Eka ti-navbar leti nga si tshamaka ti wa, engetela .navbar-expandtlilasi eka navbar. Eka ti navbar leti tshamaka ti ri karhi ti wa, u nga engeteli .navbar-expandtlilasi yihi na yihi.

Xitirhisiwa xo cinca-cinca

Ti-toggler ta Navbar ti ringanisiwa hi ximatsi hi ku tiyimisela, kambe loko ti fanele ti landzelela elemente ya makwavo ku fana na .navbar-brand, ti ta ringanisiwa hi ku tisungulela eka tlhelo ra xinene swinene. Ku tlherisela endzhaku markup ya wena swi ta tlherisela endzhaku ku vekiwa ka toggler. Laha hansi ku na swikombiso swa switayele swo hambana swa toggle.

Hi ku nga ri na ku .navbar-brandkombisiwa eka ndhawu leyitsongo yo tshoveka:

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>

Hi vito ra brand leri kombisiweke eximatsini na toggler hi tlhelo ra xinene:

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>

Hi toggler etlhelo ra ximatsi na vito ra brand hi tlhelo ra xinene:

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>

Nhundzu ya le handle

Minkarhi yin’wana u lava ku tirhisa xiengetelo xa ku wisa ku pfuxa xiaki xa xikhomela xa swilo leswi hi xivumbeko swi tshamaka ehandle ka .navbar. Hikuva plugin ya hina yi tirha eka idna ku data-bs-targetfambisana, sweswo swi endliwa hi ku olova!

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>

Loko u endla leswi, hi ringanyeta ku katsa JavaScript leyi engetelekeke leswaku u yisa ku kongomisa hi phurogireme eka xikhomela-ndhawu loko xi pfuriwa. Handle ka sweswo, vatirhisi va khibhodi na vatirhisi va thekinoloji yo pfuneta va ta va na nkarhi wo tika wo kuma swilo leswintshwa leswi paluxiweke - ngopfungopfu loko xikhomela lexi pfuriweke xi ta emahlweni ka toggler eka xivumbeko xa tsalwa. Hi tlhela hi ringanyeta ku tiyisisa leswaku toggler yi na aria-controlsattribute, yi kombetela eka idya ya xigwitsirisi xa nhundzu. Hi ku ya hi mianakanyo, leswi swi pfumelela vatirhisi va thekinoloji yo pfuneta ku tlula hi ku kongoma ku suka eka toggler ku ya eka xikhomela-ndhawu lexi yi xi lawulaka–kambe nseketelo wa leswi sweswi wu ni swiphemu-phemu swinene.

Ehandle ka canvas

Hundzuluxa navbar ya wena leyi andzeke ni leyi tshovekaka yi va drowara ya le handle ka canvas leyi nga ni xiphemu xa offcanvas . Hi ndlandlamuxa switayele swa xiviri swa offcanvas hi vumbirhi bya swona naswona hi tirhisa .navbar-expand-*titlilasi ta hina ku tumbuluxa barhi ya le tlhelo ya ku famba-famba leyi cinca-cincaka ni leyi cinca-cincaka.

Eka xikombiso lexi nga laha hansi, ku endla navbar ya offcanvas leyi tshamaka yi ri karhi yi wile ku tsemakanya tindhawu hinkwato to tshoveka, tshika .navbar-expand-*tlilasi hi ku helela.

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>

Ku endla navbar ya offcanvas leyi andlalaka eka navbar ya ntolovelo eka breakpoint yo karhi ku fana na lg, tirhisa .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>

Loko u tirhisa offcanvas eka navbar ya munyama, tiva leswaku u nga ha lava ku va na ndzhaku ka ntima eka swilo swa offcanvas ku papalata leswaku tsalwa ri nga hlayeki. Eka xikombiso lexi nga laha hansi, hi engetela .navbar-darkna .bg-darkeka .navbar, .text-bg-darkeka .offcanvas, .dropdown-menu-darkeka .dropdown-menu, na .btn-close-whiteeka .btn-closeku endla xitayili lexi faneleke hi offcanvas ya ntima.

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

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, ti-navbar sweswi ti tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .navbarfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

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

Swilo swin’wana leswi cinca-cincaka swa CSS leswi engetelekeke na swona swi kona eka .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);

Ku cinca-cinca hi ku tirhisa swilo leswi cinca-cincaka swa CSS swi nga voniwa eka .navbar-darktlilasi laha hi tlulaka mimpimo yo karhi handle ko engetela swihlawulekisi swa CSS leswi phindhiweke.

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

Sass swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka swa ti-navbar hinkwato:

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

Swilo leswi cinca-cincaka swa navbar ya munyama :

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

Titlilasi ta navbar leti hlamulaka ta expand/collapse (xikombiso, .navbar-expand-lg) ti hlanganisiwa na $breakpointsmepe naswona ti endliwa hi ku tirhisa xirhendzevutani eka 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;
          }
        }
      }
    }
  }
}