in English

Bara de navigare

Documentație și exemple pentru antetul de navigare puternic și receptiv al Bootstrap, bara de navigare. Include suport pentru branding, navigare și multe altele, inclusiv suport pentru pluginul nostru restrâns.

Pe aceasta pagina

Cum functioneaza

Iată ce trebuie să știți înainte de a începe să utilizați bara de navigare:

Barele de navigare necesită o împachetare .navbarcu .navbar-expand{-sm|-md|-lg|-xl|-xxl}pentru restrângerea receptivă și clase de schemă de culori .
Barele de navigare și conținutul lor sunt fluide în mod implicit. Schimbați containerul pentru a limita lățimea orizontală în diferite moduri.
Utilizați clasele noastre de utilitate de spațiere și flexibilitate pentru a controla spațierea și alinierea în barele de navigare.
Barele de navigare sunt receptive în mod implicit, dar le puteți modifica cu ușurință pentru a schimba asta. Comportamentul receptiv depinde de pluginul nostru restrâns JavaScript.
Asigurați accesibilitatea utilizând un <nav>element sau, dacă utilizați un element mai generic, cum ar fi un <div>, adăugați o role="navigation"la fiecare bară de navigare pentru a o identifica în mod explicit ca regiune de reper pentru utilizatorii tehnologiilor de asistență.
Indicați elementul curent utilizând aria-current="page"pentru pagina curentă sau aria-current="true"pentru elementul curent dintr-un set.

Efectul de animație al acestei componente depinde de prefers-reduced-motioninterogarea media. Consultați secțiunea cu mișcare redusă a documentației noastre de accesibilitate .

Conținut acceptat

Navbar-urile vin cu suport încorporat pentru o mână de subcomponente. Alegeți dintre următoarele după cum este necesar:

.navbar-brandpentru numele companiei, produsului sau proiectului dvs.
.navbar-navpentru o navigare la înălțime completă și ușoară (inclusiv suport pentru meniuri derulante).
.navbar-togglerpentru utilizare cu pluginul nostru de restrângere și alte comportamente de comutare a navigației .
Utilitare flexibile și spațiere pentru orice controale și acțiuni de formulare.
.navbar-textpentru adăugarea șirurilor de text centrate vertical.
.collapse.navbar-collapsepentru gruparea și ascunderea conținutului barei de navigare după un punct de întrerupere părinte.
Adăugați o opțiune .navbar-scrollpentru a seta max-heightși a derula conținutul barei de navigare extinse .

Iată un exemplu de toate subcomponentele incluse într-o bară de navigare receptivă cu tematică luminoasă, care se prăbușește automat la punctul de lgîntrerupere (mare).

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

Acest exemplu utilizează clase de utilitate de fundal ( bg-light) și spațiere ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Marca

.navbar-brandPoate fi aplicat la majoritatea elementelor, dar o ancoră funcționează cel mai bine, deoarece unele elemente ar putea necesita clase de utilitate sau stiluri personalizate .

Text

Adăugați textul într-un element cu .navbar-brandclasa.

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

Imagine

Puteți înlocui textul din interiorul .navbar-brandcu un <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>

Imagine și text

De asemenea, puteți utiliza unele utilitare suplimentare pentru a adăuga o imagine și un text în același timp. Observați adăugarea .d-inline-blockși .align-text-toppe <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

Legăturile de navigare din bara de navigare se bazează pe .navopțiunile noastre cu propria lor clasă modificatoare și necesită utilizarea claselor de comutare pentru un stil responsiv adecvat. Navigarea în barele de navigare va crește, de asemenea, pentru a ocupa cât mai mult spațiu orizontal posibil pentru a menține conținutul barei de navigare aliniat în siguranță.

Adăugați .activeclasa pentru .nav-linka indica pagina curentă.

Vă rugăm să rețineți că ar trebui să adăugați și aria-currentatributul pe activul .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>

Și pentru că folosim clase pentru navigarea noastră, puteți evita în întregime abordarea bazată pe liste dacă doriți.

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

De asemenea, puteți utiliza meniuri derulante în bara de navigare. Meniurile drop-down necesită un element de împachetare pentru poziționare, așa că asigurați-vă că utilizați elemente separate și imbricate pentru .nav-itemși .nav-linkașa cum se arată mai jos.

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

Forme

Plasați diferite controale de formular și componente într-o bară de navigare:

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

Elementele secundare imediate de .navbarutilizare a aspectului flexibil și vor fi implicit justify-content: space-between. Utilizați utilitare flexibile suplimentare după cum este necesar pentru a ajusta acest comportament.

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

Grupurile de intrare funcționează, de asemenea. Dacă bara de navigare este un formular întreg, sau mai ales un formular, puteți utiliza <form>elementul ca container și puteți salva ceva 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>

Diverse butoane sunt acceptate și ca parte a acestor forme de bară de navigare. Acesta este, de asemenea, o reamintire grozavă că utilitățile de aliniere verticală pot fi folosite pentru a alinia elemente de diferite dimensiuni.

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

Text

Barele de navigare pot conține fragmente de text cu ajutorul .navbar-text. Această clasă ajustează alinierea verticală și spațierea orizontală pentru șirurile de text.

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

Se amestecă și se potrivește cu alte componente și utilități, după cum este necesar.

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

Scheme de culori

Tematica barei de navigare nu a fost niciodată mai ușoară datorită combinației de clase de tematică și background-colorutilități. Alegeți dintre .navbar-lightpentru utilizarea cu culori de fundal deschise sau .navbar-darkpentru culori de fundal închise. Apoi, personalizați cu .bg-*utilități.

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

Containere

Deși nu este obligatoriu, puteți înfășura o bară de navigare într-o .containerpentru a o centra pe o pagină, deși rețineți că un container interior este încă necesar. Sau puteți adăuga un container în interiorul .navbarpentru a centra numai conținutul unei bare de navigare superioare fixe sau statice .

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

Utilizați oricare dintre containerele receptive pentru a modifica cât de largă este prezentat conținutul din bara de navigare.

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

Plasarea

Utilizați utilitățile noastre de poziție pentru a plasa barele de navigare în poziții non-statice. Alegeți dintre fix în sus, fix în jos sau lipit în partea de sus (se derulează cu pagina până ajunge în sus, apoi rămâne acolo). Barele de navigare fixe folosesc position: fixed, ceea ce înseamnă că sunt extrase din fluxul normal al DOM și pot necesita CSS personalizat (de exemplu, padding-toppe <body>) pentru a preveni suprapunerea cu alte elemente.

De asemenea, rețineți că .sticky-topfolosește position: sticky, care nu este pe deplin acceptat în fiecare browser .

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

Derulare

Adăugați .navbar-nav-scrollla o .navbar-nav(sau la altă subcomponentă a barei de navigare) pentru a activa derularea verticală în conținutul comutabil al unei bare de navigare restrânse. În mod implicit, defilarea se activează la 75vh(sau 75% din înălțimea ferestrei de vizualizare), dar o puteți înlocui cu proprietatea personalizată CSS locală --bs-navbar-heightsau stilurile personalizate. La ferestrele de vizualizare mai mari, când bara de navigare este extinsă, conținutul va apărea așa cum apare într-o bară de navigare implicită.

Vă rugăm să rețineți că acest comportament vine cu un potențial dezavantaj de overflow—când setarea overflow-y: auto(necesară pentru a derula conținutul aici), overflow-xeste echivalentul lui auto, care va decupa o parte a conținutului orizontal.

Iată un exemplu de bară de navigare care folosește .navbar-nav-scrollcu style="--bs-scroll-height: 100px;", cu câteva utilități de marjă suplimentare pentru o spațiere optimă.

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

Comportamente receptive

Barele de navigare pot folosi .navbar-toggler, .navbar-collapse, și .navbar-expand{-sm|-md|-lg|-xl|-xxl}clase pentru a determina când conținutul lor se prăbușește în spatele unui buton. În combinație cu alte utilități, puteți alege cu ușurință când să afișați sau să ascundeți anumite elemente.

Pentru barele de navigare care nu se restrâng niciodată, adăugați .navbar-expandclasa în bara de navigare. Pentru barele de navigare care se prăbușesc întotdeauna, nu adăugați nicio .navbar-expandclasă.

Comutator

Comutatoarele din bara de navigare sunt aliniate la stânga în mod implicit, dar dacă urmează un element frate, cum ar fi un .navbar-brand, vor fi aliniate automat la extrema dreaptă. Inversarea marcajului va inversa plasarea comutatorului. Mai jos sunt exemple de diferite stiluri de comutare.

Fără .navbar-brandafișare la cel mai mic punct de întrerupere:

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

Cu un nume de marcă afișat în stânga și comutator în dreapta:

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

Cu un comutator în stânga și numele mărcii în dreapta:

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

Conținut extern

Uneori doriți să utilizați pluginul de restrângere pentru a declanșa un element container pentru conținut care se află structural în afara fișierului .navbar. Deoarece pluginul nostru funcționează pe idși data-bs-targetpotrivire, asta se face cu ușurință!

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>

Când faceți acest lucru, vă recomandăm să includeți JavaScript suplimentar pentru a muta focalizarea în mod programatic în container atunci când acesta este deschis. În caz contrar, utilizatorii de tastatură și utilizatorii de tehnologii de asistență vor avea probabil greutăți să găsească conținutul nou dezvăluit - mai ales dacă containerul care a fost deschis vine înaintea comutatorului în structura documentului. De asemenea, vă recomandăm să vă asigurați că comutatorul are aria-controlsatributul, care indică către idcontainerul de conținut. În teorie, acest lucru permite utilizatorilor de tehnologie de asistență să treacă direct de la comutator la containerul pe care îl controlează, dar suportul pentru aceasta este în prezent destul de neregulat.

Offcanvas

Transformați bara de navigare care se extinde și se restrânge într-un sertar offcanvas cu pluginul offcanvas. Extindem atât stilurile implicite offcanvas și folosim .navbar-expand-*clasele noastre pentru a crea o bară laterală de navigare dinamică și flexibilă.

În exemplul de mai jos, pentru a crea o bară de navigare offcanvas care este întotdeauna restrânsă în toate punctele de întrerupere, omiteți în .navbar-expand-*întregime clasa.

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

Pentru a crea o bară de navigare offcanvas care se extinde într-o bară de navigare normală la un anumit punct de întrerupere, cum ar fi lg, utilizați .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

Variabile

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

Buclă

Clasele de extindere/restrângere din bara de navigare receptivă (de exemplu, .navbar-expand-lg) sunt combinate cu $breakpointsharta și generate printr-o buclă în 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;
        }
      }
    }
  }
}