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
.navbar
per 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-print
al 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 arole="navigation"
a ogni barra di navigazione per identificarla esplicitamente come una regione di riferimento per gli utenti delle tecnologie assistive.
prefers-reduced-motion
media 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-brand
per il nome della tua azienda, prodotto o progetto..navbar-nav
per una navigazione a tutta altezza e leggera (incluso il supporto per i menu a discesa)..navbar-toggler
da utilizzare con il nostro plug-in di compressione e altri comportamenti di attivazione/disattivazione della navigazione ..form-inline
per qualsiasi controllo e azione del modulo..navbar-text
per aggiungere stringhe di testo centrate verticalmente..collapse.navbar-collapse
per 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 lg
interruzione (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-brand
maggior 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-brand
volontà 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 .nav
opzioni 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-link
s o ai loro genitori immediati .nav-item
s.
<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-item
e .nav-link
come 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 .navbar
utilizzano 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-color
utilità. Scegli tra .navbar-light
per l'uso con colori di sfondo chiari o .navbar-dark
per 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 .container
per centrarla su una pagina. Oppure puoi aggiungere un contenitore all'interno .navbar
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-top
sul <body>
) per evitare la sovrapposizione con altri elementi.
Si noti inoltre che .sticky-top
utilizza 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-scroll
a 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-scroll
con 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-expand
classe sulla barra di navigazione. Per le barre di navigazione che si comprimono sempre, non aggiungere alcuna .navbar-expand
classe.
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-brand
mostrato 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 id
e data-target
abbinamenti, è facile!
<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-controls
attributo, che punta al id
contenitore 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.