in English

Navbar

Dokumentacija i primjeri za Bootstrap moćno, prilagodljivo navigacijsko zaglavlje, navigacijsku traku. Uključuje podršku za brendiranje, navigaciju i još mnogo toga, uključujući podršku za naš dodatak za kolaps.

Na ovoj stranici

Kako radi

Evo šta trebate znati prije nego što počnete s navigacijskom trakom:

Navbarovi zahtijevaju premotavanje .navbarsa .navbar-expand{-sm|-md|-lg|-xl|-xxl}za brzo sažimanje i klase sheme boja .
Navbarovi i njihov sadržaj su prema zadanim postavkama fluidni. Promijenite kontejner da ograničite njihovu horizontalnu širinu na različite načine.
Koristite naše klase uslužnih programa za razmak i fleksibilnost za kontrolu razmaka i poravnanja unutar navigacijskih traka.
Trake za navigaciju su prema zadanim postavkama prilagodljive, ali ih možete lako modificirati kako biste to promijenili. Responzivno ponašanje ovisi o našem dodatku Collapse JavaScript.
Osigurajte pristupačnost korištenjem <nav>elementa ili, ako koristite generičniji element kao što je <div>, dodajte a role="navigation"na svaku navigacijsku traku kako biste je eksplicitno identificirali kao orijentirnu regiju za korisnike pomoćnih tehnologija.
Označite trenutnu stavku koristeći aria-current="page"za trenutnu stranicu ili aria-current="true"za trenutnu stavku u setu.

Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Podržani sadržaj

Navbari dolaze sa ugrađenom podrškom za nekoliko podkomponenti. Po potrebi odaberite od sljedećeg:

.navbar-brandza naziv vaše kompanije, proizvoda ili projekta.
.navbar-navza navigaciju pune visine i laganu navigaciju (uključujući podršku za padajuće menije).
.navbar-togglerza korištenje s našim dodatkom za kolaps i drugim načinima preklapanja navigacije .
Pomoćni programi za savijanje i razmake za sve kontrole i radnje obrasca.
.navbar-textza dodavanje vertikalno centriranih nizova teksta.
.collapse.navbar-collapseza grupisanje i skrivanje sadržaja navigacijske trake prema roditeljskoj tački prekida.
Dodajte opciju .navbar-scrollza postavljanje max-heighti pomicanje proširenog sadržaja navigacijske trake .

Evo primjera svih podkomponenti uključenih u navigacijsku traku sa svjetlosnom tematikom koja se automatski ruši na lg(velikoj) tački prekida.

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

Ovaj primjer koristi pozadinu ( bg-light) i razmak ( my-2, my-lg-0, me-sm-0, my-sm-0) uslužne klase.

Brand

Može .navbar-brandse primijeniti na većinu elemenata, ali sidro najbolje funkcionira, jer neki elementi mogu zahtijevati uslužne klase ili prilagođene stilove.

Tekst

Dodajte svoj tekst unutar elementa s .navbar-brandklasom.

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

Slika

Možete zamijeniti tekst .navbar-brandunutar <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>

Slika i tekst

Također možete koristiti neke dodatne uslužne programe za dodavanje slike i teksta u isto vrijeme. Obratite pažnju na dodavanje .d-inline-blocki .align-text-topna <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

Navigacijske veze Navbar-a nadovezuju se na naše .navopcije sa svojom vlastitom klasom modifikatora i zahtijevaju korištenje preklopnih klasa za pravilan responzivni stil. Navigacija u navigacijskim trakama će također rasti kako bi zauzela što je moguće više horizontalnog prostora kako bi sadržaj vaše navigacijske trake bio sigurno poravnat.

Dodajte .activeklasu .nav-linkda označite trenutnu stranicu.

Imajte na umu da biste također trebali dodati aria-currentatribut na aktivni .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>

A pošto koristimo klase za naše navigacije, možete u potpunosti izbjeći pristup baziran na listi ako želite.

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

Također možete koristiti padajuće menije na navigacijskoj traci. Padajući meniji zahtijevaju element omota za pozicioniranje, stoga obavezno koristite zasebne i ugniježđene elemente za .nav-itemi .nav-linkkao što je prikazano ispod.

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

Forms

Postavite različite kontrole obrasca i komponente unutar navigacijske trake:

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

Neposredni podređeni elementi .navbarkoriste flex raspored i podrazumevano će biti justify-content: space-between. Koristite dodatne fleksibilne uslužne programe po potrebi da prilagodite ovo ponašanje.

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

Grupe za unos također rade. Ako je vaša navigacijska traka cijeli obrazac, ili uglavnom obrazac, možete koristiti <form>element kao kontejner i spremiti nešto HTML-a.

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

Različiti tasteri su takođe podržani kao deo ovih obrazaca za navigaciju. Ovo je također odličan podsjetnik da se alati za vertikalno poravnanje mogu koristiti za poravnavanje elemenata različitih veličina.

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

Tekst

Navbari mogu sadržavati dijelove teksta uz pomoć .navbar-text. Ova klasa prilagođava vertikalno poravnanje i horizontalni razmak za nizove teksta.

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

Pomiješajte i uskladite s drugim komponentama i uslužnim programima po potrebi.

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

Šeme boja

Tematiziranje navigacijske trake nikada nije bilo lakše zahvaljujući kombinaciji tematskih klasa i background-coloruslužnih programa. Odaberite .navbar-lightza korištenje sa svijetlim bojama pozadine ili .navbar-darkza tamne boje pozadine. Zatim prilagodite .bg-*uslužnim programima.

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

Kontejneri

Iako to nije potrebno, možete umotati navigacijsku traku u a .containerda biste je centrirali na stranici – ali imajte na umu da je unutrašnji kontejner i dalje potreban. Ili možete dodati kontejner unutar .navbarsamo da centrirate sadržaj fiksne ili statične gornje navigacijske trake .

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

Koristite bilo koji od responzivnih kontejnera da promijenite širinu prikaza sadržaja u vašoj navigacijskoj traci.

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

Plasman

Koristite naše uslužne programe za pozicioniranje da postavite navigacijske trake na nestatične pozicije. Odaberite između fiksnog na vrhu, fiksiranog na dnu ili zalijepljenog na vrhu (pomiče se sa stranicom dok ne dođe do vrha, a zatim ostaje tamo). Fiksne navigacijske trake koriste position: fixed, što znači da su izvučene iz normalnog toka DOM-a i mogu zahtijevati prilagođeni CSS (npr. padding-topna <body>) kako bi se spriječilo preklapanje sa drugim elementima.

Također imajte na umu da .sticky-topkoristi position: sticky, što nije u potpunosti podržano u svakom pretraživaču .

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

Pomicanje

Dodajte .navbar-nav-scrollu .navbar-nav(ili drugu podkomponentu navigacijske trake) da omogućite vertikalno pomicanje unutar promjenjivog sadržaja skupljene navigacijske trake. Prema zadanim postavkama, pomicanje počinje na 75vh(ili 75% visine prozora za prikaz), ali to možete nadjačati lokalnim CSS prilagođenim svojstvom --bs-navbar-heightili prilagođenim stilovima. U većim okvirima za prikaz kada se navigacijska traka proširi, sadržaj će se pojaviti kao u zadanoj navigacijskoj traci.

Imajte na umu da ovo ponašanje dolazi s potencijalnim nedostatkom — overflowkada je podešavanje overflow-y: auto(potrebno za pomicanje sadržaja ovdje) overflow-xekvivalentno auto, što će izrezati neki horizontalni sadržaj.

Evo primjera navigacijske trake koja koristi .navbar-nav-scrollsa style="--bs-scroll-height: 100px;", sa nekim dodatnim uslužnim programima margine za optimalan razmak.

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

Responzivna ponašanja

Trake za navigaciju mogu koristiti .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl|-xxl}klase da odrede kada se njihov sadržaj skupi iza dugmeta. U kombinaciji s drugim uslužnim programima, lako možete odabrati kada želite prikazati ili sakriti određene elemente.

Za navigacijske trake koje se nikada ne skupljaju, dodajte .navbar-expandklasu na navigacijsku traku. Za navigacijske trake koje se uvijek skupljaju, nemojte dodavati nijednu .navbar-expandklasu.

Toggler

Prekidači navigacijske trake su prema zadanim postavkama poravnati lijevo, ali ako slijede srodni element kao što je .navbar-brand, automatski će biti poravnati krajnje desno. Obrnutim označavanjem će se obrnuti položaj prekidača. Ispod su primjeri različitih stilova prebacivanja.

Bez .navbar-brandprikazanog na najmanjoj tački prekida:

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

Sa imenom brenda prikazanim na lijevoj strani i prekidačem na desnoj strani:

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

S prekidačem na lijevoj strani i imenom marke na desnoj strani:

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

Eksterni sadržaj

Ponekad želite da koristite dodatak za kolaps da pokrenete element kontejnera za sadržaj koji se strukturno nalazi izvan .navbar. Budući da naš dodatak radi na idi data-bs-targetpodudaranju, to je lako učiniti!

Collapsed content

Može se prebaciti preko brenda navbara.

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

Kada to učinite, preporučujemo da uključite dodatni JavaScript kako biste programski premjestili fokus na spremnik kada se otvori. U suprotnom, korisnici tastature i korisnici pomoćnih tehnologija će vjerovatno imati poteškoća u pronalaženju novootkrivenog sadržaja – posebno ako se otvoreni kontejner nalazi ispred prekidača u strukturi dokumenta. Također preporučujemo da provjerite da li prekidač ima aria-controlsatribut koji pokazuje na idkontejner sadržaja. U teoriji, ovo omogućava korisnicima pomoćne tehnologije da skoče direktno sa prekidača na kontejner koji kontroliše – ali podrška za to je trenutno prilično neujednačena.

Offcanvas

Pretvorite svoju navigacijsku traku koja se širi i sažima u ladicu van platna pomoću dodatka za offcanvas. Proširujemo i zadane stilove van platna i koristimo naše .navbar-expand-*klase za kreiranje dinamičke i fleksibilne bočne trake za navigaciju.

U primjeru ispod, da biste kreirali navigacijsku traku van platna koja je uvijek skupljena na svim tačkama prekida, u .navbar-expand-*potpunosti izostavite klasu.

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

Da biste kreirali navigacionu traku van platna koja se širi u normalnu navigacionu traku na određenoj tački prekida kao što je lg, koristite .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

Varijable

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

Petlja

Odazivne klase proširenja/sažimanja navigacijske trake (npr. .navbar-expand-lg) se kombinuju sa $breakpointsmapom i generišu kroz petlju u 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;
        }
      }
    }
  }
}