Source

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.

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

Continua a leggere per un esempio e un elenco di sottocomponenti supportati.

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Puoi anche utilizzare i menu a discesa nella tua 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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 figli 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 necessario, puoi avvolgere una barra di navigazione in a .containerper centrarla su una pagina o aggiungerne una all'interno per 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>

Comportamenti reattivi

Le Navbar possono utilizzare .navbar-toggler, .navbar-collapse, e .navbar-expand{-sm|-md|-lg|-xl}le classi per cambiare 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 nel punto di interruzione più basso:

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 contenuti nascosti in altre parti della pagina. Poiché il nostro plug-in funziona su ide data-targetabbinamenti, è facile!

<div class="pos-f-t">
  <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>