in English

Navbar

Litokomane le mehlala ea sehlooho sa Bootstrap se matla, se arabelang, navbar. E kenyelletsa tšehetso bakeng sa ho tuma, ho tsamaea, le tse ling, ho kenyeletsoa tšehetso bakeng sa plugin ea rona ea ho putlama.

Leqepheng lena

Kamoo e sebetsang kateng

Mona ke seo u hlokang ho se tseba pele u qala ka navbar:

Li-Navbar li hloka sephutheloana .navbarbakeng .navbar-expand{-sm|-md|-lg|-xl|-xxl}sa lihlopha tse arabelang tsa ho putlama le mebala .
Li-Navbar le litaba tsa tsona li na le mokelikeli ka ho sa feleng. Fetola setshelo ho fokotsa bophara ba bona bo otlolohileng ka mekhoa e fapaneng.
Sebelisa litlelase tsa rona tsa ho arohana le maemo bakeng sa ho laola sebaka le ho tsamaisana ka har'a li-navbar .
Li-Navbar li arabela ka ho sa feleng, empa u ka li fetola habonolo ho fetola seo. Boitšoaro ba ho arabela bo itšetlehile ka plugin ea rona ea Collapse JavaScript.
Netefatsa phihlello ka ho sebelisa <nav>element kapa, ha o sebelisa ntho e tloaelehileng joalo ka <div>, eketsa a role="navigation"ho navbar e 'ngoe le e 'ngoe ho e supa ka ho hlaka e le sebaka sa bohlokoa bakeng sa basebelisi ba mahlale a thusang.
Hlahisa ntho ea hajoale ka ho sebelisa aria-current="page"leqephe la hajoale kapa aria-current="true"bakeng sa ntho ea hajoale ka sete.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Litaba tse tšehelitsoeng

Li-Navbar li tla le ts'ehetso e kentsoeng bakeng sa likaroloana tse seng kae. Khetha ho tse latelang ha ho hlokahala:

.navbar-brandbakeng sa k'hamphani ea hau, sehlahisoa, kapa lebitso la projeke.
.navbar-navbakeng sa navigation ea bolelele bo felletseng le e bobebe (ho kenyeletsoa le ts'ehetso ea li-dropdown).
.navbar-togglerbakeng sa ho sebelisoa le plugin ea rona ea ho putlama le mekhoa e meng ea ho sesa .
Lisebelisoa tsa Flex le sebaka bakeng sa taolo le liketso tsa mofuta ofe kapa ofe.
.navbar-textbakeng sa ho kenya mongolo o otlolohileng bohareng.
.collapse.navbar-collapsebakeng sa ho hlophisa le ho pata litaba tsa navbar ka sebaka sa ho arohana le motsoali.
Eketsa boikhethelo .navbar-scrollho seta le ho tsamaisa max-heightlitaba tse atolositsoeng tsa navbar .

Mona ke mohlala oa likaroloana tsohle tse kenyellelitsoeng ho "navbar" e arabelang e nang le leseli e oelang sebakeng se lgseholo (se seholo).

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

Mohlala ona o sebelisa bokamorao ( bg-light) le sebaka ( my-2, my-lg-0, me-sm-0, my-sm-0) litlelase tsa thuso.

Brand

E .navbar-brandka sebelisoa ho likarolo tse ngata, empa ankora e sebetsa hantle, kaha likarolo tse ling li ka hloka litlelase tsa ts'ebeliso kapa mekhoa e tloaelehileng.

Mongolo

Kenya mongolo oa hau ka har'a ntho e itseng le .navbar-brandsehlopha.

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

Setšoantšo

U ka fetola mongolo ka .navbar-brandhar'a <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>

Setšoantšo le mongolo

U ka boela ua sebelisa lisebelisoa tse ling ho eketsa setšoantšo le mongolo ka nako e le 'ngoe. Ela hloko tlatsetso ea .d-inline-blockle .align-text-topho <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

Lihokelo tsa Navbar navigation li theha holim'a .navlikhetho tsa rona ka sehlopha sa tsona sa ho fetola 'me li hloka tšebeliso ea litlelase tsa toggler bakeng sa setaele se arabelang hantle. Ho tsamaea ka har'a li-navbar le hona ho tla hola ho nka sebaka se otlolohileng ka hohle kamoo ho ka khonehang ho boloka litaba tsa hau tsa navbar li hokahane ka mokhoa o sireletsehileng.

Kenya .activesehlopha .nav-linkho bontša leqephe la hajoale.

Ka kopo hlokomela hore o tlameha ho eketsa aria-currenttšobotsi ho e sebetsang .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>

Mme hobane re sebelisa litlelase bakeng sa li-navs tsa rona, o ka qoba mokhoa o thehiloeng lethathamong ka botlalo haeba o rata.

<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 ka sebelisa li-dropdown ho navbar ea hau. Manane a theoha a hloka karolo e phuthelang bakeng sa ho beha maemo, kahoo etsa bonnete ba hore o sebelisa likarolo tse arohaneng le tse behiloeng bakeng sa .nav-itemle .nav-linkjoalo ka ha ho bonts'itsoe ka tlase.

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

Mefuta

Beha mefuta e fapaneng ea taolo le likarolo ka har'a 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>

Lintlha tsa hang-hang tsa ngoana tsa .navbartšebeliso ea sebopeho sa flex 'me li tla lula li le justify-content: space-between. Sebelisa lisebelisoa tse eketsehileng tsa flex ha ho hlokahala ho fetola mokhoa ona.

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

Lihlopha tsa ho kenya li sebetsa, le tsona. Haeba navbar ea hau e le mofuta o felletseng, kapa hangata e le foromo, o ka sebelisa <form>element e le setshelo mme o boloke HTML e itseng.

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

Likonopo tse fapaneng li tšehetsoa e le karolo ea mefuta ena ea navbar, hape. Hona hape ke khopotso e ntle ea hore lisebelisoa tsa tekano tse otlolohileng li ka sebelisoa ho hokahanya likarolo tse fapaneng tsa boholo.

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

Mongolo

Navbar e kanna ea ba le likaroloana tsa mongolo ka thuso ea .navbar-text. Sehlopha sena se lokisa tekano e otlolohileng le sebaka se otlolohileng bakeng sa likhoele tsa mongolo.

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

Kopanya le ho kopanya le lisebelisoa tse ling le lisebelisoa ha ho hlokahala.

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

Merero ea mebala

Ho hlophisa navbar ha ho so ka ho ba bonolo ka lebaka la motsoako oa litlelase le background-colorlisebelisoa. Khetha ho tsoa .navbar-lightbakeng sa tšebeliso e nang le bokamorao ba mebala e khanyang, kapa .navbar-darkbakeng sa mebala e lefifi. Ka mor'a moo, ikamahanya le .bg-*lisebelisoa.

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

Lijana

Le hoja e sa hlokehe, o ka phuthela navbar ka .containerho e beha bohareng ba leqephe-le hoja u hlokomela hore setshelo sa ka hare se ntse se hlokahala. Kapa o ka eketsa sets'oants'o ka har'a sebaka sa marang- rang .navbarho beha feela likahare tsa navbar e tsitsitseng kapa e tsitsitseng .

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

Sebelisa leha e le efe ea lijana tse arabelang ho fetola hore na litaba tse ka har'a navbar ea hau li hlahisoa ka bophara hakae.

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

Ho beha

Sebelisa lisebelisoa tsa rona tsa maemo ho beha li-navbar libakeng tse sa tsitsitseng. Khetha ho tloha ho tse tsitsitseng ho ea holimo, tse tsitsitseng ho ea tlaase, kapa tse khomaretsoeng holimo (meqolo e nang le leqephe ho fihlela e fihla holimo, ebe e lula moo). Li-navbar tse tsitsitseng li sebelisa position: fixed, ho bolelang hore li ntšitsoe tseleng e tloaelehileng ea DOM 'me li ka hloka CSS e tloaelehileng (mohlala, padding-topho <body>) ho thibela ho kopana le likarolo tse ling.

Hape hlokomela hore e .sticky-topsebelisa position: sticky, e sa tšehetsoeng ka botlalo ho sebatli se seng le se seng .

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

Ho tsamaisetsa

Eketsa .navbar-nav-scrollho .navbar-nav(kapa karolo e 'ngoe ea navbar) ho nolofalletsa ho phenya ho ea holimo ka har'a lintho tse ka fetolehang tsa navbar e sohlokehileng. Ka mokhoa o ikhethileng, ho tsamaisetsa ho qala ho 75vh(kapa 75% ea bophahamo ba pono), empa u ka e tlola ka thepa ea lehae ea CSS --bs-navbar-heightkapa mekhoa e tloahelehileng. Libakeng tse kholoanyane tsa pono ha navbar e atolosoa, litaba li tla hlaha joalo ka ha li hlaha ho navbar ea kamehla.

Ka kopo hlokomela hore boits'oaro bona bo tla le khaello e ka bang teng ea overflow-ha ho beoa overflow-y: auto(ho hlokahala ho tsamaisa litaba mona), overflow-xke ntho e lekanang le auto, e tla hlahisa litaba tse tšekaletseng.

Mohlala ke ona navbar e sebelisang .navbar-nav-scrollle style="--bs-scroll-height: 100px;", e nang le lisebelisoa tse ling tsa marang-rang bakeng sa sebaka se nepahetseng.

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

Boitšoaro ba ho arabela

Li-Navbar li ka sebelisa .navbar-toggler, .navbar-collapse, le .navbar-expand{-sm|-md|-lg|-xl|-xxl}litlelase ho fumana hore na litaba tsa tsona li putlama ka mor'a konopo. Hammoho le lits'ebeletso tse ling, o ka khetha habonolo nako ea ho bonts'a kapa ho pata likarolo tse itseng.

Bakeng sa li-navbar tse sa keng tsa putlama, kenya .navbar-expandsehlopha ho navbar. Bakeng sa li-navbar tse lulang li putlama, u se ke oa kenya sehlopha sefe kapa sefe .navbar-expand.

Toggler

Li-togglers tsa Navbar li hokahantsoe ka ho le letšehali, empa ha li ka latela ntho ea ngoan'eno joalo ka .navbar-brand, li tla ikamahanya le hole ka ho le letona. Ho khutlisa markup ea hau ho tla khutlisa sebaka sa toggler. Ka tlase ke mehlala ea mefuta e fapaneng ea toggle.

Ha ho .navbar-brandboletsoe sebakeng se senyenyane sa breakpoint:

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

Ka lebitso la lebitso le hlahang ka ho le letšehali le toggler ka ho le letona:

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

Ka toggler ka ho le letšehali le lebitso la lebitso ka ho le letona:

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

Litaba tsa kantle

Ka nako e 'ngoe u batla ho sebelisa plugin ea ho putlama ho qala karolo ea setshelo bakeng sa litaba tse lutseng ka ntle ho .navbar. Hobane plugin ea rona e sebetsa ' idme data-bs-targete bapisa, seo se etsoa habonolo!

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>

Ha o etsa sena, re khothaletsa ho kenyelletsa JavaScript e 'ngoe ho tsamaisa tsepamiso ka mokhoa oa lenaneo ho sets'oants'o ha se buloa. Ho seng joalo, basebelisi ba keyboard le basebelisi ba mahlale a thusang ba tla thatafalloa ke ho fumana litaba tse sa tsoa senoloa - haholo-holo haeba sets'oants'o se neng se butsoe se tla ka pel'a mofetoleli sebopehong sa tokomane. Hape re khothaletsa ho etsa bonnete ba hore toggler e na le aria-controlstšobotsi, e supang idsetshelo sa litaba. Ka khopolo, sena se lumella basebelisi ba mahlale a thusang ho tlola ka kotloloho ho tloha ho toggler ho ea sets'oants'o seo e se laolang-empa ts'ehetso ea sena hajoale e thata haholo.

Offcanvas

Fetolela navbar ea hau e ntseng e hola le e putlamang hore e be drawer ea offcanvas e nang le plugin ea offcanvas. Re holisa mekhoa ea kamehla ea offcanvas mme re sebelisa .navbar-expand-*litlelase tsa rona ho theha sebaka se ka thoko sa ho sesa se feto-fetohang.

Mohlaleng o ka tlase, ho theha navbar ea offcanvas e lulang e putlame libakeng tsohle tsa phomolo, tlohela .navbar-expand-*sehlopha ka botlalo.

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

Ho theha navbar ea offcanvas e atolohang ho navbar e tloaelehileng sebakeng se ikhethileng joalo ka lg, sebelisa .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

Lintho tse fapaneng

$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

Litlelase tse arabelang tsa ho atolosa/ho putlama (mohlala, .navbar-expand-lg) li kopantsoe le ' $breakpointsmapa 'me li hlahisoa ka loop ho 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;
        }
      }
    }
  }
}