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
.navbar
per 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 arole="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 oaria-current="true"
per l'elemento corrente in un set.
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 .- Utilità flessibili e di spaziatura per qualsiasi controllo e azione dei moduli.
.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.- Aggiungi un'opzione
.navbar-scroll
per impostare una barra di navigazionemax-height
e 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 lg
interruzione (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-brand
maggior 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-brand
classe.
<!-- 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-brand
con 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-block
e .align-text-top
sul <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 .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.
Aggiungi la .active
classe .nav-link
per indicare la pagina corrente.
Tieni presente che dovresti anche aggiungere l' aria-current
attributo 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-item
e .nav-link
come 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 .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">
<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-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, anche se tieni presente che è ancora necessario un contenitore interno. 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">
<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-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">
<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-scroll
a 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-height
o 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-scroll
con 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-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">
<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 id
e data-bs-target
abbinamenti, è facile!
<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-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.
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 $breakpoints
mappa 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;
}
}
}
}
}