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.

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

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

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

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.

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

Xivumbeko

U nga siva tsalwa leri nga endzeni ka .navbar-brandhi <img>.

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

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

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

Nav

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.

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

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.

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

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.

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

Swivumbeko

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

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.

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

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.

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

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.

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

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.

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

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

Swikimi swa mihlovo

Theming the navbar a yi si tshama yi olova hikwalaho ka ku hlanganisiwa ka titlilasi ta theming na background-colorswitirhisiwa. Hlawula eka .navbar-lightku tirhisiwa na mihlovo yo vonikela ya le ndzhaku, kumbe .navbar-darkeka 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 navbar-light" 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 .

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

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.

<nav class="navbar navbar-expand-lg navbar-light 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 cinciki ku ya ehenhla, leswi nga cinciki ehansi kumbe leswi namarhetiwe ehenhla (swiphepherhele ni tluka ku kondza ri fika ehenhla, ivi u 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.

Nakambe xiya leswaku .sticky-topyi tirhisa position: sticky, leyi nga seketeriwiki hi ku helela eka browser yin'wana ni yin'wana .

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

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.

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

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:

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

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

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

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

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

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!

Collapsed content

Toggleable via the navbar brand.

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

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 no wa yi va drowara ya offcanvas hi plugin ya 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.

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

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-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass

Swilo leswi cinca-cincaka

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

Xintambyana

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: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}