Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

Navbar

Dokumentácia a príklady výkonnej a citlivej navigačnej hlavičky Bootstrap, navigačnej lišty. Zahŕňa podporu pre branding, navigáciu a ďalšie, vrátane podpory pre náš plugin na zbalenie.

Na tejto stránke

Ako to funguje

Tu je to, čo potrebujete vedieť predtým, ako začnete používať navigačný panel:

  • Navbary vyžadujú zalomenie .navbars .navbar-expand{-sm|-md|-lg|-xl|-xxl}pre responzívne zbalenie a triedy farebnej schémy .
  • Navigačné panely a ich obsah sú v predvolenom nastavení plynulé. Zmeňte kontajner tak, aby ste rôznymi spôsobmi obmedzili ich horizontálnu šírku.
  • Na ovládanie rozstupov a zarovnania v rámci navigačných panelov použite naše triedy rozstupov a flex .
  • Navigačné panely sú v predvolenom nastavení responzívne, ale môžete ich ľahko upraviť, aby ste to zmenili. Responzívne správanie závisí od nášho doplnku Collapse JavaScript.
  • Zabezpečte dostupnosť pomocou <nav>prvku alebo, ak používate všeobecnejší prvok, ako napríklad <div>, pridajte a role="navigation"na každý navigačný panel, aby ste ho explicitne identifikovali ako orientačný región pre používateľov asistenčných technológií.
  • Označte aktuálnu položku pomocou aria-current="page"pre aktuálnu stránku alebo aria-current="true"pre aktuálnu položku v skupine.
  • Novinka vo verzii 5.2.0: Navigačné panely môžu byť tematicky upravené pomocou premenných CSS, ktoré sú v rozsahu .navbarzákladnej triedy. .navbar-lightbol zastaraný a .navbar-darkbol prepísaný tak, aby prepísal premenné CSS namiesto pridávania ďalších štýlov.
Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Podporovaný obsah

Navigačné panely sa dodávajú so vstavanou podporou pre niekoľko podsúčiastok. Podľa potreby si vyberte z nasledujúcich možností:

  • .navbar-brandpre názov vašej spoločnosti, produktu alebo projektu.
  • .navbar-navpre plnú výšku a ľahkú navigáciu (vrátane podpory rozbaľovacích zoznamov).
  • .navbar-togglerna použitie s naším zásuvným modulom pre zbalenie a inými spôsobmi prepínania navigácie .
  • Pomôcky Flex a medzery pre akékoľvek ovládacie prvky formulárov a akcie.
  • .navbar-textna pridávanie vertikálne centrovaných reťazcov textu.
  • .collapse.navbar-collapsena zoskupenie a skrytie obsahu navigačnej lišty pomocou nadradeného bodu prerušenia.
  • Pridajte voliteľnú položku .navbar-scrollna nastavenie max-heighta posúvanie obsahu rozšírenej navigačnej lišty .

Tu je príklad všetkých čiastkových komponentov zahrnutých v responzívnom navigačnom paneli so svetlou tematikou, ktorý sa automaticky zbalí na lg(veľkom) bode zlomu.

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>

Tento príklad používa pomocné triedy pozadia ( bg-light) a medzier ( me-auto, mb-2, mb-lg-0, ).me-2

Značka

Dá .navbar-brandsa použiť na väčšinu prvkov, ale kotva funguje najlepšie, pretože niektoré prvky môžu vyžadovať pomocné triedy alebo vlastné štýly.

Text

Pridajte svoj text do prvku s .navbar-brandtriedou.

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>

Obrázok

Text v rámci súboru môžete nahradiť .navbar-brandpríponou <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>

Obrázok a text

Môžete tiež použiť niektoré ďalšie nástroje na pridanie obrázka a textu súčasne. Všimnite si pridanie .d-inline-blocka .align-text-topna <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>

Navigačné odkazy na navigačnom paneli stavajú na našich .navmožnostiach s vlastnou triedou modifikátorov a vyžadujú použitie tried prepínačov pre správny responzívny štýl. Navigácia v navigačných paneloch sa tiež rozrastie, aby zaberala čo najviac horizontálneho priestoru, aby bol obsah navigačnej lišty bezpečne zarovnaný.

Pridajte .activetriedu na .nav-linkoznačenie aktuálnej stránky.

Upozorňujeme, že aria-currentatribút by ste mali pridať aj na aktívny .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>

A pretože používame triedy pre naše navigačné zariadenia, môžete sa úplne vyhnúť prístupu založenému na zoznamoch, ak chcete.

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>

Môžete tiež použiť rozbaľovacie ponuky na navigačnom paneli. Rozbaľovacie ponuky vyžadujú obalový prvok na umiestnenie, takže sa uistite, že používate samostatné a vnorené prvky pre .nav-itema .nav-linkako je uvedené nižšie.

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>

Formuláre

Umiestnite rôzne ovládacie prvky formulárov a komponenty na navigačnú lištu:

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>

Okamžité podradené prvky .navbarpoužívajú flexibilné rozloženie a predvolene sa nastaví na justify-content: space-between. Na úpravu tohto správania použite podľa potreby ďalšie nástroje Flex .

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>

Fungujú aj vstupné skupiny. Ak je vaším navigačným panelom celý formulár alebo väčšinou formulár, môžete <form>prvok použiť ako kontajner a uložiť si nejaké 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>

Ako súčasť týchto formulárov navigačnej lišty sú podporované aj rôzne tlačidlá. Je to tiež skvelá pripomienka, že nástroje na vertikálne zarovnanie možno použiť na zarovnanie prvkov rôznych veľkostí.

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>

Text

Navigačné panely môžu obsahovať kúsky textu s pomocou .navbar-text. Táto trieda upravuje vertikálne zarovnanie a horizontálne medzery pre reťazce textu.

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

Miešajte a kombinujte s ostatnými komponentmi a pomôckami podľa potreby.

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>

Farebné schémy

Novinka vo verzii 5.2.0: Téma Navbar teraz využíva premenné CSS a .navbar-lightbola zastaraná. Premenné CSS sa aplikujú na .navbar, predvolene majú „svetlý“ vzhľad a možno ich prepísať pomocou .navbar-dark.

Témy navigačného panela sú jednoduchšie ako kedykoľvek predtým vďaka kombinácii premenných Sass a CSS od Bootstrapu. Predvolená je naša „svetlá navigačná lišta“ na použitie so svetlými farbami pozadia, ale môžete použiť aj .navbar-darktmavé farby pozadia. Potom prispôsobte pomocou .bg-*nástrojov.

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

Kontajnery

Aj keď to nie je povinné, môžete zabaliť navigačný panel do a .containera vycentrovať ho na stranu – aj keď si uvedomte, že vnútorný kontajner je stále potrebný. Alebo môžete pridať kontajner dovnútra, .navbaraby ste vycentrovali iba obsah pevného alebo statického horného navigačného panela .

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>

Použite ktorýkoľvek z responzívnych kontajnerov na zmenu toho, ako široký je obsah vo vašom navigačnom paneli prezentovaný.

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

Umiestnenie

Použite naše nástroje na umiestnenie na umiestnenie navigačných panelov do nestatických pozícií. Vyberte si z možností pevne navrchu, pripevniť na spodok, nalepiť navrch (posúva so stránkou, kým nedosiahne vrch, potom tam zostane) alebo prilepiť nadol (posúva so stránkou, kým nedosiahne spodok, potom zostane tam).

Pevné navigačné panely používajú position: fixed, čo znamená, že sú vytiahnuté z normálneho toku DOM a môžu vyžadovať vlastný CSS (napr. padding-topna <body>), aby sa zabránilo prekrývaniu s inými prvkami.

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>

Rolovanie

Pridajte .navbar-nav-scrolldo .navbar-nav(alebo iného podkomponentu navigačnej lišty), aby ste umožnili vertikálne posúvanie v rámci prepínateľného obsahu zbalenej navigačnej lišty. V predvolenom nastavení sa posúvanie začína na 75vh(alebo 75 % výšky zobrazovanej oblasti), ale môžete to prepísať lokálnou vlastnou vlastnosťou CSS --bs-navbar-heightalebo vlastnými štýlmi. Vo väčších výrezoch po rozbalení navigačnej lišty sa obsah zobrazí ako v predvolenej navigačnej lište.

Upozorňujeme, že toto správanie má potenciálnu nevýhodu overflow— keď nastavenie overflow-y: auto(vyžaduje sa na posúvanie obsahu sem), overflow-xje ekvivalentom auto, čím sa oreže nejaký horizontálny obsah.

Tu je príklad použitia navigačnej lišty .navbar-nav-scrolls style="--bs-scroll-height: 100px;", s niektorými dodatočnými pomôckami okrajov pre optimálne rozstupy.

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>

Responzívne správanie

Navigačné panely môžu používať triedy .navbar-toggler, .navbar-collapsea .navbar-expand{-sm|-md|-lg|-xl|-xxl}na určenie, kedy sa ich obsah zbalí za tlačidlo. V kombinácii s inými pomôckami si môžete jednoducho vybrať, kedy sa majú jednotlivé prvky zobraziť alebo skryť.

Pre navigačné lišty, ktoré sa nikdy nezrútia, pridajte .navbar-expandtriedu na navigačnú lištu. Pre navigačné panely, ktoré sa vždy zrútia, nepridávajte žiadnu .navbar-expandtriedu.

Prepínač

Prepínače navigačnej lišty sú v predvolenom nastavení zarovnané doľava, ale ak budú nasledovať po súrodeneckom prvku, ako je .navbar-brand, budú automaticky zarovnané úplne vpravo. Obrátením značky zmeníte umiestnenie prepínača. Nižšie sú uvedené príklady rôznych štýlov prepínania.

Pri .navbar-brandnajmenšom zlomovom bode nie je zobrazené žiadne:

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>

S názvom značky vľavo a prepínačom vpravo:

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>

S prepínačom vľavo a názvom značky vpravo:

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>

Externý obsah

Niekedy chcete použiť doplnok zbalenia na spustenie prvku kontajnera pre obsah, ktorý sa štrukturálne nachádza mimo súboru .navbar. Pretože náš doplnok funguje na priraďovaní ida data-bs-targetporovnávaní, je to jednoduché!

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>

Keď to urobíte, odporúčame vám zahrnúť ďalší JavaScript, aby ste pri otvorení kontajnera programovo presunuli zameranie. V opačnom prípade používatelia klávesnice a používatelia asistenčných technológií budú mať pravdepodobne problém nájsť novo odhalený obsah – najmä ak kontajner, ktorý bol otvorený, sa nachádza pred prepínačom v štruktúre dokumentu. Odporúčame tiež uistiť sa, že prepínač má aria-controlsatribút, ktorý ukazuje na idkontajner obsahu. Teoreticky to umožňuje používateľom asistenčných technológií skočiť priamo z prepínača do kontajnera, ktorý ovláda – ale podpora pre toto je v súčasnosti dosť nejednotná.

Offcanvas

Pomocou komponentu offcanvas premeňte svoj rozširujúci sa a stláčajúci navigačný panel na zásuvku offcanvas . Rozširujeme oba predvolené štýly offcanvas a používame naše .navbar-expand-*triedy na vytvorenie dynamického a flexibilného bočného panela navigácie.

Ak chcete v nižšie uvedenom príklade vytvoriť navigačný panel mimo plátna, ktorý je vždy zbalený vo všetkých bodoch prerušenia, .navbar-expand-*triedu úplne vynechajte.

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>

Ak chcete vytvoriť navigačnú lištu mimo plátna, ktorá sa rozšíri na normálnu navigačnú lištu v špecifickom bode prerušenia, ako napríklad lg, použite .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>

Keď používate offcanvas v tmavom navigačnom paneli, uvedomte si, že možno budete musieť mať tmavé pozadie na obsahu offcanvas, aby sa predišlo nečitateľnosti textu. V nižšie uvedenom príklade pridáme .navbar-darka .bg-darkdo .navbar, .text-bg-darkdo .offcanvas, .dropdown-menu-darkdo .dropdown-menua .btn-close-whitedo .btn-closepre správny štýl s tmavým offcanvasom.

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

Premenné

Pridané vo verzii 5.2.0

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, navigačné panely teraz používajú lokálne premenné CSS zapnuté .navbarna vylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

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

Niektoré ďalšie premenné CSS sú tiež prítomné 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);

Prispôsobenie pomocou premenných CSS je možné vidieť na .navbar-darktriede, kde prepisujeme konkrétne hodnoty bez pridávania duplicitných selektorov CSS.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass premenné

Premenné pre všetky navigačné panely:

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

Premenné pre tmavý navigačný panel :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass slučka

Responzívne triedy rozbalenia/zbalenia navigačnej lišty (napr. .navbar-expand-lg) sa kombinujú s $breakpointsmapou a generujú sa pomocou cyklu v 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;
          }
        }
      }
    }
  }
}