Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Navbar

Mikanda mpe bandakisa mpo na motó ya kotambola ya nguya, ya koyanola ya Bootstrap, navbar. Esangisi lisungi mpo na kosala marque, navigation, mpe mingi mosusu, bakisa mpe lisungi mpo na plugin na biso ya kokwea.

Na lokasa oyo

Ndenge oyo esalaka

Tala oyo esengeli oyeba liboso ya kobanda na navbar:

  • Navbars esengaka enveloppe .navbarna .navbar-expand{-sm|-md|-lg|-xl|-xxl}pona ba classes ya collapsing responsive na scheme ya couleur .
  • Ba Navbars na ba contenus na yango eza fluide par défaut. Bobongola récipient mpo na kopekisa bonene na bango ya horizontal na ndenge ekeseni.
  • Salelá ba classes na biso ya espacement mpe flex utilitaire mpo na ko contrôler espacement mpe alignment na kati ya ba navbars.
  • Navbars ezali responsive par défaut, kasi okoki ko modifier yango facilement pona ko changer yango. Comportement ya réponse etali plugin na biso ya Collapse JavaScript.
  • Kosala ete bozwi na kosalelaka <nav>eleman moko to, soki bosaleli eleman moko ya monene mingi lokola a <div>, bakisa a role="navigation"na navbar nyonso mpo na koyeba yango polele lokola etuka ya esika ya ntina mpo na basaleli ya mayele ya kosunga.
  • Lakisa eloko ya lelo na kosalelaka aria-current="page"mpo na lokasa ya lelo to aria-current="true"mpo na eloko ya lelo na ensemble.
  • Ya sika na v5.2.0: Ba Navbars ekoki kozala na thème na ba variables CSS oyo ezali na scope na .navbarclasse ya base. .navbar-lightesili kozala deprecated mpe .navbar-darkekomami lisusu mpo na koboya ba variables ya CSS na esika ya kobakisa ba styles ya kobakisa.
Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Makambo oyo esungami

Navbars ezalaka na soutien intégré mpo na mwa ndambo ya ba sous-composants. Poná kati na makambo oyo elandi soki esengeli:

  • .navbar-brandmpo na kompanyi na yo, biloko na yo, to nkombo ya mosala na yo.
  • .navbar-navmpo na navigation ya bosanda mobimba mpe ya pete (na kati na yango lisungi mpo na ba dropdowns).
  • .navbar-togglermpo na kosalela na plugin na biso ya kokwea mpe bizaleli mosusu ya kobongola navigation .
  • Ba utilitaires ya flexion na espacement pona ba contrôles ya formulaire nionso na ba actions.
  • .navbar-textmpo na kobakisa bansinga ya makomi oyo ezali na katikati ya semba.
  • .collapse.navbar-collapsempo na kosangisa mpe kobomba makambo ya navbar na esika ya bopanzani ya moboti.
  • Bakisa option moko .navbar-scrollpona ko setting a max-heightpe défiler contenus ya navbar oyo epanzani .

Tala ndakisa ya ba sous-composants nionso oyo ekotisami na navbar oyo ezo répondre na thème ya lumière oyo ezo collapser automatiquement na lgpoint de rupture (ya munene).

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>

Ndakisa oyo esaleli ba classes ya utilitaire ya fond ( bg-light) na espacement ( me-auto, mb-2, mb-lg-0, ).me-2

Marke

The .navbar-brandekoki kosalelama na ba éléments mingi, kasi anchor esalaka malamu koleka, lokola ba éléments mosusu ekoki kosenga ba classes ya utilité to ba styles personnalisés.

Nkoma

Bakisa makomi na yo na kati ya eleman moko elongo na .navbar-brandkelasi.

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>

Foto

Okoki kozongisa makomi oyo ezali na kati .navbar-brandya <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>

Elilingi mpe makomi

Okoki mpe kosalela mwa ba utilitaires mosusu mpo na kobakisa elilingi mpe makomi na ntango moko. Talá ndenge oyo babakisaki .d-inline-blockmpe .align-text-toplikoló ya <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>

Ba liens ya navigation ya Navbar etongami na ba .navoptions na biso na classe na bango moko ya modificateur mpe esengaka kosalela ba classes ya toggler mpo na styling ya réponse ya malamu. Navigation na ba navbars ekokola pe pona ko occuper espace horizontal ebele ndenge ekoki pona ko garder ba contenus ya navbar na yo na sécurité aligné.

Bakisa .activekelasi na .nav-linkmpo na kolakisa lokasa oyo ozali kosalela.

Tosengi oyeba ete osengeli mpe kobakisa aria-currentattribut na active .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>

Et po tosalelaka ba classes pona ba navs na biso, okoki ko éviter approche basé na liste entièrement soki olingi.

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>

Okoki mpe kosalela ba dropdowns na navbar na yo. Ba menu ya kokita esengaka élément ya enveloppe mpo na positionnement, yango wana sala makasi osalela ba éléments separates mpe encastrés mpo na .nav-itemmpe .nav-linkndenge elakisami awa na se.

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>

Baformilɛrɛ

Tia ba contrôles ya formulaire ndenge na ndenge na ba composants na kati ya 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>

Ba éléments ya mwana ya mbala moko ya .navbarkosalela flex layout mpe ekozala par défaut na justify-content: space-between. Salelá ba utilitaires flex ya kobakisa soki esengeli mpo na kobongisa bizaleli oyo.

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>

Ba groupes ya entrée esalaka, pe. Soki navbar na yo ezali formulaire mobimba, to mingi mingi formulaire, okoki kosalela <form>élément lokola conteneur mpe kobomba mwa HTML.

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>

Ba boutons ndenge na ndenge esungami lokola eteni ya ba formulaire oyo ya navbar, mpe. Oyo ezali mpe bokundoli monene ete ba utilitaires ya alignment vertical ekoki kosalelama mpo na ko aligner ba éléments ya taille différente.

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>

Nkoma

Navbars ekoki kozala na biteni ya makomi na lisalisi ya .navbar-text. Kelasi oyo ebongisaka alignment vertical mpe espacement horizontal mpo na ba chaînes ya texte.

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

Sangisa mpe kosangisa na ba composants mpe ba utilités mosusu soki esengeli.

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>

Ba schemes ya ba couleurs

Ya sika na v5.2.0: Thème ya Navbar ezali sikoyo na nguya ya ba variables CSS mpe .navbar-lightesili kosila. Ba variables ya CSS esalelami na .navbar, na ndenge ya liboso na ndenge ya komonana “polele,” mpe ekoki kolongolama na .navbar-dark.

Ba thèmes ya Navbar ezali facile koleka jamais grâce na combinaison ya Bootstrap ya ba variables Sass na CSS. Par défaut ezali “navbar ya pole” na biso mpo na kosalela yango na balangi ya nsima ya pole, kasi okoki mpe kosɛnga .navbar-darkbalangi ya nsima ya moindo. Na nsima, personnaliser na ba .bg-*utilités.

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

Ba récipients

Atako esengeli te, okoki kozinga navbar na a .containermpo na katikati na yango na lokasa–atako yeba ete eloko ya kati esengeli naino. To okoki kobakisa eloko moko na kati ya .navbarmpo na kotya kaka na katikati ya makambo oyo ezali na kati ya navbar ya likoló oyo ezali kotɛngatɛnga to oyo ezali kotɛngatɛnga te .

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>

Salelá moko ya ba récipients oyo ezo répondre mpo na kobongola ndenge nini makambo oyo ezali na navbar na yo emonisami.

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

Botiami na esika

Salelá ba utilitaires na biso ya position mpo na kotia ba navbars na ba positions oyo ezali statique te. Poná kati na oyo ekangami na likoló, ekangami na nse, ekangami na likoló (ezali kosala défilement na lokasa tii ekokóma na likoló, na nsima ekotikala wana), to oyo ekangami na nse (kosala défilement na lokasa tii ekokóma na nse, na nsima ekotikala kuna).

Ba navbars fixes esalela position: fixed, elingi koloba ba bendami na flux normal ya DOM mpe ekoki kosenga CSS personnalisé (ndakisa, padding-topna <body>) mpo na kopekisa superposition na ba éléments mosusu.

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>

Kosala défilement

Bakisa .navbar-nav-scrollna .navbar-nav(to sous-composant mosusu ya navbar) mpo na kopesa nzela na défilement vertical na kati ya makambo oyo ekoki kobongola ya navbar oyo ekangami. Na ndenge ya libela, kosala défilement ebandi na 75vh(to 75% ya bosanda ya esika ya kotala), kasi okoki koboya yango na propriété personnalisée ya CSS ya esika --bs-navbar-heightto ba styles personnalisés. Na ba viewports ya minene tango navbar epanzani, contenus ekobima ndenge esalemaka na navbar ya défaut.

Svp yeba que comportement oyo eyaka na inconvénient potentiel ya overflow—ntango setting overflow-y: auto(esengeli pona ko défiler contenus awa), overflow-xezali équivalent ya auto, oyo eko crop mua contenus horizontal.

Tala ndakisa navbar kosalela .navbar-nav-scrollna style="--bs-scroll-height: 100px;", na mwa ba utilitaires ya marge ya likolo mpo na espacement optimal.

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>

Bizaleli ya koyanola

Navbars ekoki kosalela .navbar-toggler, .navbar-collapse, mpe .navbar-expand{-sm|-md|-lg|-xl|-xxl}bakelasi mpo na koyeba ntango nini makambo na yango ekwei nsima ya bouton moko. Na kosangisa na ba utilitaires mosusu, okoki kopona na pete tango nini kolakisa to kobomba ba éléments particuliers.

Mpo na ba navbar oyo ekweaka ata moke te, bakisa .navbar-expandkelasi na navbar. Pona ba navbars oyo ezo collapser toujours, kobakisa .navbar-expandclasse moko te.

Moto oyo azali kobongola makambo

Ba togglers ya Navbar ezali na gauche-aligné par défaut, kasi soki balandi élément ya ndeko lokola .navbar-brand, bakozala automatiquement aligné na extreme droite. Kozongisa sima marquage na yo ekozongisa sima placement ya toggler. Awa na se ezali na bandakisa ya ba styles ya toggle ekeseni.

Na ata moko te .navbar-brandelakisami na esika ya kobukana ya moke koleka:

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>

Na kombo ya marque oyo elakisami na gauche mpe toggler na droite:

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>

Na toggler na gauche mpe kombo ya marque na droite:

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>

Makambo ya libanda

Tango mosusu olingi kosalela plugin ya collapse mpo na ko déclencher élément ya conteneur mpo na contenus oyo structurellement efandi libanda ya .navbar. Po plugin na biso esalaka na idpe data-bs-targetmatching, yango esalemaka facilement!

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>

Ntango ozali kosala bongo, tozali kolendisa yo otya JavaScript mosusu mpo na komema focus na ndenge ya programɛ na esika oyo batyaka biloko ntango ekofungwama. Soki te, basaleli ya klaviatware mpe basaleli ya mayele ya kosunga bakozala mbala mosusu na mokakatano mpo na koluka makambo oyo emonisami sika - mingimingi soki eloko oyo efungolamaki eyei liboso ya mobongisi-nzela na ebongiseli ya mokanda. Tosengi mpe kosala ete toggler ezala na aria-controlsattribut, kolakisa na idya conteneur ya contenus. Na théorie, yango epesaka nzela na basaleli ya tekiniki ya lisalisi mpo na kopumbwa mbala moko uta na toggler kino na conteneur oyo yango ezali kotambwisa–kasi lisungi mpo na oyo ezali na ntango oyo mpenza patchy.

Offcanvas ezali

Bobongola navbar na yo oyo ezali kopanzana mpe kokwea na tirware oyo ezali na toile te na eteni oyo ezali na toile te . Tozali ko extend ba styles par défaut ya hors toile mpe tosalelaka ba .navbar-expand-*classes na biso mpo na kosala barre latérale ya navigation dynamique mpe flexible.

Na ndakisa oyo ezali awa na nse, mpo na kosala navbar ya libanda ya toile oyo ezali ntango nyonso kokwea na kati ya bisika nyonso ya kobuka, longola .navbar-expand-*kelasi mobimba.

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>

Mpo na kosala navbar ya libanda ya toile oyo epanzani na navbar ya momesano na esika ya kobukana ya sikisiki lokola lg, salelá .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>

Ntango ozali kosalela offcanvas na navbar ya molili, yebá ete ekoki kozala ete osengeli kozala na fond ya molili na makambo oyo ezali na offcanvas mpo makomi ekóma oyo ekoki kotángama te. Na ndakisa oyo ezali awa na nse, tobakisi .navbar-darkmpe .bg-darkna .navbar, .text-bg-darkna .offcanvas, .dropdown-menu-darkna .dropdown-menu, mpe .btn-close-whitena .btn-closempo na kosala styling malamu na offcanvas ya molili.

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

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba navbars esalela sikoyo ba variables CSS locales na .navbarpona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

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

Ba variables mosusu ya CSS ya kobakisa ezali pe na .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);

Personnalisation na nzela ya ba variables CSS ekoki komonana na .navbar-darkclasse esika tozali ko superposer ba valeurs spécifiques sans kobakisa ba sélecteurs CSS doublons.

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

Ba variables ya Sass

Ba variables pona ba navbars nionso:

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

Variables mpo na navbar ya molili :

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

Boucle ya Sass

Ba classes ya expand/collapse ya navbar oyo ezo répondre (ndakisa, .navbar-expand-lg) esangisami na $breakpointscarte pe esalemi na nzela ya boucle na 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;
          }
        }
      }
    }
  }
}