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, il plug-in di compressione e altro ancora.

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}di compressione e combinazione di colori reattive.
Le barre di navigazione e il loro contenuto sono fluide per impostazione predefinita. Utilizzare contenitori opzionali per limitarne la larghezza orizzontale.
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.
Le barre di navigazione sono nascoste per impostazione predefinita durante la stampa. Forza la loro stampa aggiungendo .d-printal file .navbar. Vedere la classe di utilità di visualizzazione .
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.

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 .
.form-inlineper qualsiasi controllo e azione del modulo.
.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.

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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Questo esempio utilizza le classi di utilità color ( bg-light) e spaziatura ( my-2, my-lg-0, mr-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.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

L'aggiunta di immagini alla .navbar-brandvolontà probabilmente richiede sempre stili personalizzati o utilità per ridimensionare correttamente. Ecco alcuni esempi da dimostrare.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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.

Gli stati attivi — con .active— per indicare che la pagina corrente può essere applicata direttamente a .nav-links o ai loro genitori immediati .nav-items.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Le forme

Posiziona vari controlli e componenti del modulo all'interno di una barra di navigazione con .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</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">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Anche i gruppi di input funzionano:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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. 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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Quando il contenitore si trova all'interno della barra di navigazione, il riempimento orizzontale viene rimosso nei punti di interruzione inferiori alla .navbar-expand{-sm|-md|-lg|-xl}classe specificata. Ciò garantisce che non stiamo raddoppiando il riempimento inutilmente nelle finestre di visualizzazione inferiori quando la barra di navigazione è compressa.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Scorrimento

Aggiungi .navbar-nav-scrolla un .navbar-collapse(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 attiva a 75vh(o al 75% dell'altezza della finestra), ma puoi sovrascriverlo con stili in linea o 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="max-height: 100px;", con alcune utilità di margine extra per una spaziatura ottimale.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <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 mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Comportamenti reattivi

Le Navbar possono utilizzare .navbar-toggler, .navbar-collapse, e .navbar-expand{-sm|-md|-lg|-xl}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">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Con un marchio mostrato a sinistra e un interruttore a destra:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Con un interruttore a sinistra e il nome del marchio a destra:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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-targetabbinamenti, è facile!

Contenuto compresso

Attivabile tramite il marchio della barra di navigazione.

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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.