S čím potřebuješ pomoct?
< Všechna témata
Tisk

Navigační lišta

Vloženo
Aktualizováno
VložilOndřej Topínka
Zobrazeno6

Běžná navigační lišta

S Bootstrapem může být navigační lišta rozšířena nebo sbalena v závislosti na velikosti obrazovky.

Standardní navigační lišta je vytvořena s třídou .navbar, následovaná reagující sbalovací třídou: .navbar-expand-xxl|xl|lg|md|sm (umístí navigační lištu vertikálně na obrazovkách velikosti xxlarge, extra large, large, medium or small).

Pro přidání odkazů do navigační lišty použijte buď element <ul> (nebo <div>) s třídou class="navbar-nav". Poté přidejte elementy <li> s třídou .nav-item následované elementem <a> s třídou .nav-link

Příklad

<!-- Šedá horizontální navigační lišta, která se na malých obrazovkách stane vertikální -->
<nav class="navbar navbar-expand-sm bg-light">

  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>

</nav>

Vertikální navigační lišta

Odeberte třídu .navbar-expand-* pro vytvoření navigační lišty, která bude vždy vertikální:

Příklad

<!-- Šedá vertikální navigační lišta -->
<nav class="navbar bg-light">
  ...
</nav>

Vycentrování navigační lišty

Přidej třídu .justify-content-center pro vycentrování navigační lišty:

Příklad

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Barevná navigační lišta

Použij libovolnou třídu .bg-color pro změnu barvy pozadí navigační lišty (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)

Tip: Přidejte bílou barvu textu ke všem odkazům v navigační liště s třídou .navbar-dark, nebo použij třídu .navbar-light pro přidání černé barvy textu.

Kód

<!-- Šedá s černým textem -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Černé pozadí s bílým textem -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>


&lt;!-- Modré pozadí s bílým textem -->
&lt;nav class="navbar navbar-expand-sm bg-primary navbar-dark">...&lt;/nav>

Aktivní/neaktivní stav: Přidej třídu .active do elementu <a> pro zvýraznění aktuálního odkazu nebo třídu .disabled pro označení, že odkaz není klikatelný.

Logo

Třída .navbar-brand se používá pro zvýraznění značky/loga/názvu projektu na stránce:

Logo

Kód

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Při použití třídy .navbar-brand s obrázky automaticky Bootstrap 5 upraví obrázek tak, aby se vešel do navigační lišty vertikálně.

Avatar Logo

Kód

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Text v navigační liště

Použij třídu .navbar-text pro vertikální zarovnání jakýchkoli prvků uvnitř navigační lišty, které nejsou odkazy (zajistí správné odsazení a barvu textu).

Příklad

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Navbar text</span>
  </div>
</nav>

Logo

Často, zejména na malých obrazovkách, chceme skrýt navigační odkazy a nahradit je tlačítkem, které je zobrazí po kliknutí.

Pro vytvoření sbalitelné navigační lišty použijte tlačítko s třídou class="navbar-toggler", data-bs-toggle="collapse" a data-bs-target="#thetarget". Poté obal obsah navigační lišty (odkazy atd.) uvnitř elementu <div> s třídou class="collapse navbar-collapse", které odpovídá data-bs-target tlačítka: „thetarget„.

Kód

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Obsah
© 2025 Lukáš Pospíšil