barra di navigazione

Documentazione ed esempi per l'intestazione di navigazione potente e reattiva di Bootstrap, la barra di navigazione. Include il supporto per il branding, la navigazione e altro, incluso il supporto per il nostro plug-in di compressione.

Su questa pagina

Come funziona

Ecco cosa devi sapere prima di iniziare con la barra di navigazione:

Le barre di navigazione richiedono un wrapping .navbarper classi .navbar-expand{-sm|-md|-lg|-xl|-xxl}di compressione e combinazione di colori reattive.
Le barre di navigazione e il loro contenuto sono fluide per impostazione predefinita. Cambia il contenitore per limitarne la larghezza orizzontale in diversi modi.
Usa le nostre classi di utilità di spaziatura e flessibilità per controllare la spaziatura e l'allineamento all'interno delle barre di navigazione.
Le Navbar sono reattive per impostazione predefinita, ma puoi facilmente modificarle per cambiarlo. Il comportamento reattivo dipende dal nostro plug-in JavaScript Comprimi.
Garantire l'accessibilità utilizzando un <nav>elemento o, se si utilizza un elemento più generico come un <div>, aggiungere a role="navigation"a ogni barra di navigazione per identificarla esplicitamente come una regione di riferimento per gli utenti delle tecnologie assistive.
Indicare l'elemento corrente utilizzando aria-current="page"per la pagina corrente o aria-current="true"per l'elemento corrente in un set.

L'effetto di animazione di questo componente dipende dalla prefers-reduced-motionmedia query. Vedi la sezione movimento ridotto della nostra documentazione sull'accessibilità .

Contenuti supportati

Le Navbar sono dotate di supporto integrato per una manciata di sottocomponenti. Scegli tra i seguenti secondo necessità:

.navbar-brandper il nome della tua azienda, prodotto o progetto.
.navbar-navper una navigazione a tutta altezza e leggera (incluso il supporto per i menu a discesa).
.navbar-togglerda utilizzare con il nostro plug-in di compressione e altri comportamenti di attivazione/disattivazione della navigazione .
Utilità flessibili e di spaziatura per qualsiasi controllo e azione dei moduli.
.navbar-textper aggiungere stringhe di testo centrate verticalmente.
.collapse.navbar-collapseper raggruppare e nascondere i contenuti della barra di navigazione in base a un punto di interruzione padre.
Aggiungi un'opzione .navbar-scrollper impostare una barra di navigazione max-heighte scorrere il contenuto espanso .

Ecco un esempio di tutti i sottocomponenti inclusi in una barra di navigazione reattiva a tema leggero che si comprime automaticamente al punto di lginterruzione (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" href="#" tabindex="-1" aria-disabled="true">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>

Questo esempio utilizza le classi di utilità background ( bg-light) e spaziatura ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Marca

Può essere applicato alla .navbar-brandmaggior parte degli elementi, ma un'ancora funziona meglio, poiché alcuni elementi potrebbero richiedere classi di utilità o stili personalizzati.

Testo

Aggiungi il tuo testo all'interno di un elemento con la .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>

Immagine

Puoi sostituire il testo all'interno di .navbar-brandcon un <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Immagine e testo

Puoi anche utilizzare alcune utilità aggiuntive per aggiungere un'immagine e un testo contemporaneamente. Notare l'aggiunta di .d-inline-blocke .align-text-topsul <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

nav

I collegamenti di navigazione della barra di navigazione si basano sulle nostre .navopzioni con la propria classe di modifica e richiedono l'uso di classi di commutazione per uno stile reattivo adeguato. La navigazione nelle barre di navigazione aumenterà anche per occupare quanto più spazio orizzontale possibile per mantenere allineati in modo sicuro i contenuti della barra di navigazione.

Aggiungi la .activeclasse .nav-linkper indicare la pagina corrente.

Tieni presente che dovresti anche aggiungere l' aria-currentattributo su active .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

E poiché utilizziamo le classi per i nostri nav, puoi evitare del tutto l'approccio basato su elenchi, se lo desideri.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Puoi anche utilizzare i menu a discesa nella barra di navigazione. I menu a discesa richiedono un elemento di avvolgimento per il posizionamento, quindi assicurati di utilizzare elementi separati e nidificati per .nav-iteme .nav-linkcome mostrato di seguito.

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

Le forme

Posiziona vari controlli modulo e componenti all'interno di 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>

Gli elementi figlio immediati .navbarutilizzano il layout flessibile e verranno impostati automaticamente su justify-content: space-between. Utilizzare utilità flessibili aggiuntive secondo necessità per regolare questo comportamento.

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

Anche i gruppi di input funzionano. Se la tua barra di navigazione è un intero modulo, o principalmente un modulo, puoi utilizzare l' <form>elemento come contenitore e salvare del codice 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>

Anche vari pulsanti sono supportati come parte di questi moduli della barra di navigazione. Questo è anche un ottimo promemoria del fatto che le utilità di allineamento verticale possono essere utilizzate per allineare elementi di dimensioni diverse.

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

Testo

Le barre di navigazione possono contenere frammenti di testo con l'aiuto di .navbar-text. Questa classe regola l'allineamento verticale e la spaziatura orizzontale per le stringhe di testo.

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

Mescolare e abbinare con altri componenti e utilità secondo necessità.

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

Combinazioni di colori

Il tema della barra di navigazione non è mai stato così facile grazie alla combinazione di classi di temi e background-colorutilità. Scegli tra .navbar-lightper l'uso con colori di sfondo chiari o .navbar-darkper colori di sfondo scuri. Quindi, personalizza con .bg-*le 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>

Contenitori

Sebbene non sia richiesto, puoi avvolgere una barra di navigazione in a .containerper centrarla su una pagina, anche se tieni presente che è ancora necessario un contenitore interno. Oppure puoi aggiungere un contenitore all'interno .navbarper centrare solo il contenuto 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>

Utilizza uno dei contenitori reattivi per modificare l'ampiezza di presentazione del contenuto nella 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>

Posizionamento

Usa le nostre utilità di posizione per posizionare le barre di navigazione in posizioni non statiche. Scegli tra fisso in alto, fisso in basso o incollato in alto (scorre con la pagina fino a raggiungere la parte superiore, quindi rimane lì). Risolto il problema con l'utilizzo delle barre di navigazione position: fixed, il che significa che vengono estratte dal normale flusso del DOM e potrebbero richiedere CSS personalizzati (ad esempio, padding-topsul <body>) per evitare la sovrapposizione con altri elementi.

Si noti inoltre che .sticky-toputilizza position: sticky, che non è completamente supportato in tutti i 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>

Scorrimento

Aggiungi .navbar-nav-scrolla un .navbar-nav(o altro sottocomponente della barra di navigazione) per abilitare lo scorrimento verticale all'interno dei contenuti attivabili di una barra di navigazione compressa. Per impostazione predefinita, lo scorrimento si avvia a 75vh(o al 75% dell'altezza del viewport), ma puoi sovrascriverlo con la proprietà personalizzata CSS locale --bs-navbar-heighto gli stili personalizzati. In finestre più grandi, quando la barra di navigazione è espansa, il contenuto apparirà come in una barra di navigazione predefinita.

Tieni presente che questo comportamento presenta un potenziale svantaggio di overflow—quando l'impostazione overflow-y: auto(necessaria per scorrere il contenuto qui), overflow-xè l'equivalente di auto, che ritaglierà alcuni contenuti orizzontali.

Ecco un esempio di barra di navigazione che utilizza .navbar-nav-scrollcon style="--bs-scroll-height: 100px;", con alcune utilità di margine extra per una spaziatura 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" href="#" tabindex="-1" aria-disabled="true">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>

Comportamenti reattivi

Le Navbar possono utilizzare .navbar-toggler, .navbar-collapse, e .navbar-expand{-sm|-md|-lg|-xl|-xxl}le classi per determinare quando il loro contenuto si comprime dietro un pulsante. In combinazione con altre utilità, puoi facilmente scegliere quando mostrare o nascondere elementi particolari.

Per le barre di navigazione che non si rompono mai, aggiungi la .navbar-expandclasse sulla barra di navigazione. Per le barre di navigazione che si comprimono sempre, non aggiungere alcuna .navbar-expandclasse.

Commutatore

I commutatori della barra di navigazione sono allineati a sinistra per impostazione predefinita, ma se seguono un elemento di pari livello come un .navbar-brand, verranno automaticamente allineati all'estrema destra. L'inversione del markup invertirà il posizionamento del commutatore. Di seguito sono riportati esempi di diversi stili di commutazione.

Con no .navbar-brandmostrato al punto di interruzione più piccolo:

<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" href="#" tabindex="-1" aria-disabled="true">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 un marchio mostrato a sinistra e un interruttore a destra:

<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" href="#" tabindex="-1" aria-disabled="true">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 un interruttore a sinistra e il nome del marchio a destra:

<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" href="#" tabindex="-1" aria-disabled="true">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>

Contenuti esterni

A volte si desidera utilizzare il plug-in di compressione per attivare un elemento contenitore per il contenuto che si trova strutturalmente al di fuori del file .navbar. Poiché il nostro plug-in funziona su ide data-bs-targetabbinamenti, è facile!

Contenuto compresso

Attivabile tramite il marchio della barra di navigazione.

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

Quando si esegue questa operazione, si consiglia di includere JavaScript aggiuntivo per spostare lo stato attivo a livello di codice sul contenitore quando viene aperto. In caso contrario, gli utenti della tastiera e gli utenti delle tecnologie assistive avranno probabilmente difficoltà a trovare il contenuto appena rivelato, in particolare se il contenitore che è stato aperto viene prima del commutatore nella struttura del documento. Ti consigliamo inoltre di assicurarti che il toggler abbia l' aria-controlsattributo, che punta al idcontenitore del contenuto. In teoria, ciò consente agli utenti di tecnologie assistive di passare direttamente dal commutatore al contenitore che controlla, ma il supporto per questo è attualmente piuttosto irregolare.

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;

Ciclo continuo

Le classi reattive di espansione/compressione della barra di navigazione (ad es. .navbar-expand-lg) vengono combinate con la $breakpointsmappa e generate tramite un ciclo 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;
        }
      }
    }
  }
}