in English

Navbaro

Dokumentado kaj ekzemploj por la potenca, respondema navigadokapo de Bootstrap, la navbar. Inkluzivas subtenon por markado, navigado kaj pli, inkluzive de subteno por nia kolapsa kromaĵo.

Sur ĉi tiu paĝo

Kiel ĝi funkcias

Jen kion vi bezonas scii antaŭ ol komenci kun la navigadbreto:

Navbaroj postulas envolvadon .navbarkun .navbar-expand{-sm|-md|-lg|-xl|-xxl}por respondemaj kolapsaj kaj kolorskemoj klasoj.
Navbaroj kaj ilia enhavo estas fluaj defaŭlte. Ŝanĝu la ujon por limigi ilian horizontalan larĝon en malsamaj manieroj.
Uzu niajn interspacigajn kaj fleksajn utilajn klasojn por kontroli interspacon kaj vicigon ene de navbaroj.
Navbaroj estas respondemaj defaŭlte, sed vi povas facile modifi ilin por ŝanĝi tion. Respondema konduto dependas de nia Kolapsa JavaScript-kromaĵo.
Certigu alireblecon uzante <nav>elementon aŭ, se vi uzas pli senmarkan elementon kiel ekzemple <div>, aldonu role="navigation"al ĉiu navbar por eksplicite identigi ĝin kiel grava regiono por uzantoj de helpaj teknologioj.
Indiku la nunan objekton uzante aria-current="page"por la nuna paĝo aŭ aria-current="true"por la nuna ero en aro.

La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Subtena enhavo

Navbars venas kun enkonstruita subteno por manpleno da subkomponentoj. Elektu el la jenaj laŭbezone:

.navbar-brandpor via kompanio, produkto aŭ projektonomo.
.navbar-navpor plenalta kaj malpeza navigado (inkluzive de subteno por falmenuoj).
.navbar-togglerpor uzo kun nia kolapsa kromaĵo kaj aliaj navigaciaj ŝanĝantaj kondutoj.
Fleksaj kaj interspacaj utilecoj por ajnaj formularaj kontroloj kaj agoj.
.navbar-textpor aldoni vertikale centritajn ĉenojn de teksto.
.collapse.navbar-collapsepor grupigi kaj kaŝi navbar enhavon per gepatra rompopunkto.
Aldonu laŭvolan .navbar-scrollpor agordi max-heightkaj rulumi vastigitan navbaran enhavon .

Jen ekzemplo de ĉiuj subkomponentoj inkluzivitaj en respondema lumtema navbaro, kiu aŭtomate kolapsas ĉe la lg(granda) rompopunkto.

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

Ĉi tiu ekzemplo uzas fonajn ( bg-light) kaj interspacigajn ( my-2, my-lg-0, me-sm-0, my-sm-0) utilajn klasojn.

Marko

La .navbar-brandpovas esti aplikata al la plej multaj elementoj, sed ankro plej bone funkcias, ĉar iuj elementoj eble postulos utilajn klasojn aŭ kutimajn stilojn.

Teksto

Aldonu vian tekston ene de elemento kun la .navbar-brandklaso.

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

Bildo

Vi povas anstataŭigi la tekston ene de la .navbar-brandper <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>

Bildo kaj teksto

Vi ankaŭ povas uzi kelkajn pliajn ilojn por aldoni bildon kaj tekston samtempe. Notu la aldonon de .d-inline-blockkaj .align-text-topsur la <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

Navbar-navigadaj ligiloj baziĝas sur niaj .navopcioj kun sia propra modifklaso kaj postulas la uzon de baskulimaj klasoj por taŭga respondema stilo. Navigado en navbaroj ankaŭ kreskos por okupi tiom da horizontala spaco kiel eble por konservi vian navbar-enhavon sekure vicigita.

Aldonu la .activeklason .nav-linkpor indiki la nunan paĝon.

Bonvolu noti, ke vi ankaŭ devus aldoni la aria-currentatributon sur la aktiva .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>

Kaj ĉar ni uzas klasojn por niaj navigacioj, vi povas tute eviti la list-bazitan aliron, se vi ŝatas.

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

Vi ankaŭ povas uzi falmenuojn en via navigadbreto. Falmenuoj postulas envolvan elementon por poziciigado, do nepre uzu apartajn kaj nestitajn elementojn por .nav-itemkaj .nav-linkkiel montrite sube.

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

Formoj

Metu diversajn formularajn kontrolojn kaj komponentojn ene de 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>

Tujaj infanaj elementoj de .navbaruzo fleksas aranĝon kaj defaŭlte al justify-content: space-between. Uzu pliajn flekseblajn ilojn laŭbezone por ĝustigi ĉi tiun konduton.

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

Ankaŭ enigogrupoj funkcias. Se via navigadbreto estas tuta formo, aŭ plejparte formo, vi povas uzi la <form>elementon kiel la ujo kaj konservi iom da HTML.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Ankaŭ diversaj butonoj estas subtenataj kiel parto de ĉi tiuj navbarformularoj. Ĉi tio ankaŭ estas bonega rememorigilo, ke vertikalaj vicigiloj povas esti uzataj por vicigi malsamajn grandajn elementojn.

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

Teksto

Navbaroj povas enhavi pecetojn da teksto helpe de .navbar-text. Ĉi tiu klaso ĝustigas vertikalan vicigon kaj horizontalan interspacon por ĉenoj de teksto.

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

Miksu kaj kongruu kun aliaj komponantoj kaj utilecoj laŭbezone.

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

Koloraj skemoj

Temigi la navbaron neniam estis pli facila danke al la kombinaĵo de temaj klasoj kaj background-colorutilecoj. Elektu el .navbar-lightpor uzo kun helaj fonkoloroj, aŭ .navbar-darkpor malhelaj fonkoloroj. Poste, agordu per .bg-*utilecoj.

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

Ujoj

Kvankam ĝi ne estas postulata, vi povas envolvi navbaron en .containerpor centri ĝin sur paĝo-kvankam notu, ke interna ujo ankoraŭ necesas. Aŭ vi povas aldoni ujon en la .navbarpor nur centri la enhavon de fiksa aŭ senmova supra navbaro .

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

Uzu iun el la respondemaj ujoj por ŝanĝi kiom larĝa estas prezentita la enhavo en via navbaro.

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

Lokigo

Uzu niajn poziciajn utilecojn por meti navbarojn en ne-statikajn poziciojn. Elektu el fiksita al la supro, fiksita al la malsupro, aŭ algluita al la supro (rulumas kun la paĝo ĝis ĝi atingas la supron, tiam restas tie). Fiksaj navbaroj uzas position: fixed, signifante ke ili estas tiritaj de la normala fluo de la DOM kaj povas postuli kutiman CSS (ekz., padding-topsur la <body>) por malhelpi interkovron kun aliaj elementoj.

Ankaŭ rimarku, ke .sticky-topuzas position: sticky, kiu ne estas plene subtenata en ĉiu retumilo .

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

Rulumado

Aldonu .navbar-nav-scrollal .navbar-nav(aŭ alia navdrinksubkomponento) por ebligi vertikalan movadon ene de la ŝanĝebla enhavo de kolapsita navigadbreto. Defaŭlte, movo ekfunkcias je 75vh(aŭ 75% de la alteco de la vidfenestro), sed vi povas superregi tion per la loka CSS-propra propraĵo --bs-navbar-heightaŭ kutimaj stiloj. Ĉe pli grandaj vidfenestroj kiam la navigadbreto estas vastigita, enhavo aperos kiel ĝi aperas en defaŭlta navigadbreto.

Bonvolu noti, ke ĉi tiu konduto venas kun ebla malavantaĝo de overflow—kiam agordo overflow-y: auto(necesa por rulumi la enhavon ĉi tie), overflow-xestas la ekvivalento de auto, kiu tranĉos iom da horizontala enhavo.

Jen ekzemplo navbar uzanta .navbar-nav-scrollkun style="--bs-scroll-height: 100px;", kun kelkaj kromaj marĝenaj utilecoj por optimuma interspaco.

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

Respondema kondutoj

Navbaroj povas uzi .navbar-toggler, .navbar-collapse, kaj .navbar-expand{-sm|-md|-lg|-xl|-xxl}klasojn por determini kiam ilia enhavo kolapsas malantaŭ butono. Kombine kun aliaj utilecoj, vi povas facile elekti kiam montri aŭ kaŝi apartajn elementojn.

Por navbaroj kiuj neniam kolapsas, aldonu la .navbar-expandklason sur la navbar. Por navbaroj kiuj ĉiam kolapsas, ne aldonu ajnan .navbar-expandklason.

Toggler

Navbar-ŝanĝiloj estas maldekstre vicigitaj defaŭlte, sed se ili sekvas gefratan elementon kiel .navbar-brand, ili aŭtomate viciĝos maldekstre. Inversigi vian markadon inversigos la lokigon de la baskulo. Malsupre estas ekzemploj de malsamaj baskulimaj stiloj.

Sen .navbar-brandmontrita ĉe la plej malgranda rompopunkto:

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

Kun markonomo montrita maldekstre kaj baskulo dekstre:

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

Kun baskulo maldekstre kaj markonomo dekstre:

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

Ekstera enhavo

Kelkfoje vi volas uzi la kolapsan kromaĵon por ekigi kontenerlementon por enhavo kiu strukture sidas ekster la .navbar. Ĉar nia kromaĵo funkcias sur la idkaj data-bs-targetkongruo, tio estas facile farita!

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>

Kiam vi faras tion, ni rekomendas inkluzivi plian JavaScript por movi la fokuson programe al la ujo kiam ĝi estas malfermita. Alie, klavaruzantoj kaj uzantoj de helpaj teknologioj verŝajne malfacile trovos la lastatempe malkaŝitan enhavon - precipe se la ujo kiu estis malfermita venas antaŭ la baskulo en la strukturo de la dokumento. Ni ankaŭ rekomendas certigi, ke la baskulo havas la aria-controlsatributon, indikante la idde la enhavujo. Teorie, ĉi tio permesas al uzantoj de helpteknologioj salti rekte de la baskulo al la ujo, kiun ĝi regas, sed subteno por ĉi tio estas nuntempe sufiĉe neregula.

Eksterkanvaso

Transformu vian disvastiĝantan kaj kolapantan navbaron en eksterkanvasan tirkeston per la offcanvas kromaĵo. Ni etendas ambaŭ la defaŭltajn stilojn de eksterkanvaso kaj uzas niajn .navbar-expand-*klasojn por krei dinamikan kaj flekseblan navigan flankmenuon.

En la malsupra ekzemplo, por krei eksterkanvasan navigadbreton, kiu ĉiam estas kolapsita tra ĉiuj rompopunktoj, .navbar-expand-*tute preterlasu la klason.

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

Por krei eksterkanvasan navigadbreton kiu disetendiĝas al normala navigadbreto ĉe specifa rompopunkto kiel lg, uzu .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

Variabloj

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

Buklo

Respondema navbar ekspansiiĝi/kolapsi klasoj (ekz., .navbar-expand-lg) estas kombinitaj kun la $breakpointsmapo kaj generitaj per buklo en 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;
        }
      }
    }
  }
}