in English

Navbar

Documentazione è esempi per l'intestazione di navigazione putente è responsiva di Bootstrap, a barra di navigazione. Include supportu per a marca, navigazione, è più, cumpresu supportu per u nostru plugin di colapsu.

In sta pagina

Cumu funziona

Eccu ciò chì avete bisognu di sapè prima di principià cù a barra di navigazione:

I Navbars necessitanu un avvolgimentu .navbarcù .navbar-expand{-sm|-md|-lg|-xl|-xxl}per classi di collapsing responsive è schema di culori .
Navbars è u so cuntenutu sò fluidi per difettu. Cambia u cuntinuu per limità a so larghezza horizontale in diverse manere.
Aduprate e nostre classi di utilità di spaziatura è flex per cuntrullà u spaziamentu è l'allineamentu in i navbars.
Navbars sò rispunsevuli per automaticamente, ma pudete facilmente mudificà per cambià. U cumpurtamentu responsive dipende da u nostru plugin JavaScript Collapse.
Assicurà l'accessibilità aduprendu un <nav>elementu o, se utilizate un elementu più genericu cum'è un <div>, aghjunghje un role="navigation"à ogni navbar per identificà esplicitamente cum'è una regione di riferimentu per l'utilizatori di tecnulugii assistivi.
Indicate l'elementu attuale usendu aria-current="page"per a pagina attuale o aria-current="true"per l'elementu attuale in un set.

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Cuntenutu supportatu

Navbars venenu cù supportu integratu per una manciata di sub-cumpunenti. Sceglite trà i seguenti cum'è necessariu:

.navbar-brandper a vostra cumpagnia, produttu o nome di prughjettu.
.navbar-navper una navigazione à tutta l'altezza è ligera (cumpresu supportu per dropdowns).
.navbar-togglerper l'usu cù u nostru plugin di colapsu è altri cumpurtamenti di navigazione .
Flex è utilità di spaziatura per qualsiasi cuntrolli di forma è azzioni.
.navbar-textper aghjunghje stringhe di testu centrate verticalmente.
.collapse.navbar-collapseper raggruppà è nasconde u cuntenutu di a barra di navigazione da un puntu di ruptura parente.
Aghjunghjite un optional .navbar-scrollper stabilisce un max-heightè scorri u cuntenutu di a barra di navigazione ampliata .

Eccu un esempiu di tutti i sub-cumpunenti inclusi in una navbar di tematica luminosa rispunsiva chì collapses automaticamente à u puntu di lgrottura (grande).

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

Questu esempiu usa classi di utilità di fondo ( bg-light) è spaziatura ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Marca

Pò .navbar-brandesse appiicatu à a maiò parte di l'elementi, ma un ancora funziona megliu, cum'è certi elementi puderanu dumandà classi di utilità o stili persunalizati.

Testu

Aghjunghjite u vostru testu in un elementu cù a .navbar-brandclasse.

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

Image

Pudete rimpiazzà u testu in u .navbar-brandcun 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>

Image è testu

Pudete ancu aduprà alcune utilità supplementari per aghjunghje una maghjina è testu à u stessu tempu. Nota l'aghjunzione di .d-inline-blockè .align-text-topnantu à u <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

I ligami di navigazione Navbar si basanu nantu à e nostre .navopzioni cù a so propria classa di modificatore è esigenu l'usu di classi toggler per un stile di rispunsibilità propiu. A navigazione in navbars cresce ancu per occupà u più spaziu horizontale pussibule per mantene u vostru cuntenutu di navbar allineatu in modu sicuru.

Aghjunghjite a .activeclassa .nav-linkper indicà a pagina attuale.

Per piacè nutate chì avete ancu aghjunghje l' aria-currentattributu nantu à l'attivu .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>

È perchè usemu classi per i nostri navs, pudete evità l'approcciu basatu in lista interamente se ti piace.

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

Pudete ancu aduprà dropdowns in a vostra barra di navigazione. I menu dropdown necessitanu un elementu di imballaggio per u posizionamentu, cusì assicuratevi di utilizà elementi separati è nidificati per .nav-itemè .nav-linkcum'è mostratu quì sottu.

<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

Pone diversi cuntrolli di forma è cumpunenti in una barra di navigazione:

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

Elementi di i zitelli immediati di .navbarusu flex layout è predeterminate à justify-content: space-between. Aduprate utilità flex supplementari quantu necessariu per aghjustà stu cumpurtamentu.

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

I gruppi di input funzionanu ancu. Se u vostru navbar hè una forma sana, o soprattuttu una forma, pudete aduprà l' <form>elementu cum'è u cuntinuu è salvà qualchì 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>

Diversi buttoni sò supportati ancu cum'è parte di queste forme di navbar. Questu hè ancu un grande ricordu chì l'utilità di allineamentu verticale ponu esse aduprate per allineà elementi di diverse dimensioni.

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

Testu

Navbars pò cuntene pezzi di testu cù l'aiutu di .navbar-text. Questa classa aghjusta l'allineamentu verticale è u spaziu horizontale per e stringhe di testu.

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

Imbulighjate è abbinate cù altri cumpunenti è utilità cum'è necessariu.

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

Schemi di culori

Theming the navbar ùn hè mai statu più faciule grazia à a cumminazione di classi di tematiche è background-colorutilità. Sceglite .navbar-lightper l'usu cù culori di fondu chjaru, o .navbar-darkper culori di fondu scuru. Dopu, persunalizà cù .bg-*utilità.

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

Contenituri

Ancu s'ellu ùn hè micca necessariu, pudete imbulighjà una barra di navigazione in un .containercentru per centru nantu à una pagina, ancu se nutate chì un containeru internu hè sempre necessariu. O pudete aghjunghje un cuntinuu in u .navbarcentru per centru solu u cuntenutu di una barra di navigazione superiore fissa o statica .

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

Aduprate qualsiasi di i cuntenituri rispunsevuli per cambià quantu hè presentatu u cuntenutu in a vostra barra di navigazione.

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

Placement

Aduprate e nostre utilità di pusizioni per mette navbars in pusizioni non statiche. Sceglite da fissu à a cima, fissu à u fondu, o appiccicatu à a cima (scrolls cù a pagina finu à ch'ella ghjunghje in cima, poi ferma quì). I navbars fissi utilizanu position: fixed, vale à dì chì sò tirati da u flussu normale di u DOM è ponu esse bisognu di CSS persunalizati (per esempiu, padding-topnantu à <body>) per impediscenu a sovrapposizione cù altri elementi.

Innota ancu chì .sticky-topusa position: sticky, chì ùn hè micca cumplettamente supportatu in ogni navigatore .

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

Scrolling

Aghjunghjite .navbar-nav-scrollà un .navbar-nav(o un altru sub-componente di a barra di navigazione) per attivà u scrolling verticale in u cuntenutu basculable di una barra di navigazione colapsata. Per automaticamente, u scrolling si mette in 75vh(o 75% di l'altitudine di a vista), ma pudete annullà quellu cù a pruprietà CSS locale --bs-navbar-heighto stili persunalizati. À viste più grande quandu a barra di navigazione hè allargata, u cuntenutu apparirà cum'è in una barra di navigazione predeterminata.

Per piacè nutate chì stu cumpurtamentu vene cun un svantaghju potenziale di overflow-quandu l'impostazione overflow-y: auto(necessariu per scrollà u cuntenutu quì), overflow-xhè l'equivalente di auto, chì tagliarà qualchì cuntenutu horizontale.

Eccu un esempiu di navbar .navbar-nav-scrollcù style="--bs-scroll-height: 100px;", cù alcune utilità di margine extra per un spaziu ottimale.

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

Cumportamenti rispunsevuli

Navbars ponu aduprà .navbar-toggler, .navbar-collapse, è .navbar-expand{-sm|-md|-lg|-xl|-xxl}classi per determinà quandu u so cuntenutu colapsà daretu à un buttone. In cumbinazione cù altre utilità, pudete facilmente sceglie quandu mostra o ammuccià elementi particulari.

Per i navbars chì ùn colapsanu mai, aghjunghje a .navbar-expandclassa nantu à a navbar. Per i navbars chì sempre colapsanu, ùn aghjunghje micca .navbar-expandclassi.

Toggler

I togglers di Navbar sò allineati à manca per difettu, ma se seguitanu un elementu fratellu cum'è un .navbar-brand, seranu automaticamente allinati à l'estrema destra. Inverte u vostru marcatu invierterà a piazza di u toggler. Quì sottu sò esempi di diversi stili di toggle.

Senza .navbar-brandmostratu à u puntu di pausa più chjucu:

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

Cù un nome di marca mostratu à manca è toggler à diritta:

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

Cù un toggler à manca è a marca à a diritta:

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

Cuntinutu esternu

A volte vulete usà u plugin di colapsu per attivà un elementu di cuntainer per u cuntenutu chì strutturalmente si trova fora di u .navbar. Perchè u nostru plugin funziona nantu à ide data-bs-targetcurrispundenza, questu hè facilmente fattu!

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>

Quandu fate questu, ricumandemu di include JavaScript supplementu per trasfurmà u focu programmaticamente à u cuntinuu quandu hè apertu. Altrimenti, l'utilizatori di u teclatu è l'utilizatori di tecnulugii d'assistenza prubabilmente averebbenu difficultà à truvà u cuntenutu novu revelatu - in particulare se u cuntainer chì hè statu apertu vene prima di u toggler in a struttura di u documentu. Hè ricumandemu ancu di assicurà chì u toggler hà l' aria-controlsattributu, indicà à idu cuntenutu di u cuntenutu. In teoria, questu permette à l'utilizatori di tecnulugia d'assistenza per saltà direttamente da u toggler à u cuntainer chì cuntrolla, ma u supportu per questu hè attualmente abbastanza irregulare.

Offcanvas

Trasfurmà a vostra barra di navigazione in espansione è colapsante in un tiratore offcanvas cù u plugin offcanvas. Estendemu i dui stili predeterminati offcanvas è utilizemu e nostre .navbar-expand-*classi per creà una barra laterale di navigazione dinamica è flessibile.

In l'esempiu sottu, per creà una barra di navigazione offcanvas chì hè sempre colapsata in tutti i punti di rottura, omette a .navbar-expand-*classa sanu.

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

Per creà una barra di navigazione offcanvas chì si espande in una barra di navigazione normale in un puntu di ruptura specificu cum'è lg, utilizate .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

Variabili

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

Loop

A navbar responsive expand / collapse classi (per esempiu, .navbar-expand-lg) sò cumminati cù a $breakpointsmappa è generati attraversu un loop in 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;
        }
      }
    }
  }
}