Navbar
Dokumentation och exempel för Bootstraps kraftfulla, lyhörda navigeringshuvud, navbaren. Inkluderar stöd för varumärkesbyggande, navigering och mer, inklusive stöd för vår kollaps-plugin.
Hur det fungerar
Här är vad du behöver veta innan du börjar med navigeringsfältet:
- Navbars kräver en omslag
.navbar
med.navbar-expand{-sm|-md|-lg|-xl|-xxl}
för responsiv kollapsning och färgschemaklasser . - Navbars och deras innehåll är flytande som standard. Ändra behållaren för att begränsa deras horisontella bredd på olika sätt.
- Använd våra avstånds- och flexverktygsklasser för att kontrollera avstånd och justering inom navigeringsfält.
- Navbars är lyhörda som standard, men du kan enkelt ändra dem för att ändra det. Responsivt beteende beror på vår Collapse JavaScript-plugin.
- Säkerställ tillgänglighet genom att använda ett
<nav>
element eller, om du använder ett mer generiskt element som t.ex. ett<div>
, lägg till ettrole="navigation"
i varje navigeringsfält för att uttryckligen identifiera det som ett landmärkesområde för användare av hjälpmedel. - Ange det aktuella objektet genom att använda
aria-current="page"
för den aktuella sidan elleraria-current="true"
för det aktuella objektet i en uppsättning.
prefers-reduced-motion
mediefrågan. Se
avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .
Innehåll som stöds
Navbars kommer med inbyggt stöd för en handfull delkomponenter. Välj mellan följande efter behov:
.navbar-brand
för ditt företags-, produkt- eller projektnamn..navbar-nav
för en fullhöjd och lätt navigering (inklusive stöd för rullgardinsmenyn)..navbar-toggler
för användning med vårt kollaps-plugin och andra navigeringsväxlingsbeteenden .- Flex- och avståndsverktyg för alla formkontroller och åtgärder.
.navbar-text
för att lägga till vertikalt centrerade textsträngar..collapse.navbar-collapse
för att gruppera och dölja navigeringsfältets innehåll efter en överordnad brytpunkt.- Lägg till ett alternativ
.navbar-scroll
för att ställa in ettmax-height
och rulla utökat navigeringsfältsinnehåll .
Här är ett exempel på alla underkomponenter som ingår i en responsiv navbar med ljustema som automatiskt kollapsar vid den lg
(stora) brytpunkten.
<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>
Det här exemplet använder verktygsklasserna bakgrund ( bg-light
) och mellanrum ( my-2
, my-lg-0
, me-sm-0
, ).my-sm-0
varumärke
Den .navbar-brand
kan appliceras på de flesta element, men ett ankare fungerar bäst, eftersom vissa element kan kräva verktygsklasser eller anpassade stilar.
Text
Lägg till din text i ett element med .navbar-brand
klassen.
<!-- 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>
Bild
Du kan ersätta texten i .navbar-brand
med en <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>
Bild och text
Du kan också använda några ytterligare verktyg för att lägga till en bild och text samtidigt. Observera tillägget av .d-inline-block
och .align-text-top
på <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
Navbar-navigeringslänkar bygger på våra .nav
alternativ med sin egen modifieringsklass och kräver användning av växlingsklasser för korrekt responsiv styling. Navigering i navigeringsfält kommer också att växa till att uppta så mycket horisontellt utrymme som möjligt för att hålla ditt navigeringsfält säkert justerat.
Lägg till .active
klassen för .nav-link
att indikera den aktuella sidan.
Observera att du också bör lägga till aria-current
attributet på den aktiva .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>
Och eftersom vi använder klasser för våra nav, kan du undvika det listbaserade tillvägagångssättet helt om du vill.
<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>
Du kan också använda rullgardinsmenyn i navigeringsfältet. Rullgardinsmenyer kräver ett omslutningselement för positionering, så se till att använda separata och kapslade element för .nav-item
och .nav-link
som visas nedan.
<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>
Blanketter
Placera olika formulärkontroller och komponenter i ett navigeringsfält:
<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>
Omedelbara underordnade element av .navbar
användning flex layout och kommer som standard till justify-content: space-between
. Använd ytterligare flexverktyg efter behov för att justera detta beteende.
<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>
Ingångsgrupper fungerar också. Om ditt navfält är ett helt formulär, eller mestadels ett formulär, kan du använda <form>
elementet som behållare och spara lite 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>
Olika knappar stöds också som en del av dessa navigeringsfält. Detta är också en bra påminnelse om att vertikala inriktningsverktyg kan användas för att justera element i olika storlekar.
<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>
Text
Navbars kan innehålla bitar av text med hjälp av .navbar-text
. Den här klassen justerar vertikal justering och horisontellt avstånd för textsträngar.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Blanda och matcha med andra komponenter och verktyg efter behov.
<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>
Färgscheman
Temaning av navbaren har aldrig varit enklare tack vare kombinationen av temaklasser och background-color
verktyg. Välj mellan .navbar-light
för användning med ljusa bakgrundsfärger eller .navbar-dark
för mörka bakgrundsfärger. Anpassa sedan med .bg-*
verktyg.
<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>
Behållare
Även om det inte är nödvändigt, kan du slå in en navbar i en .container
för att centrera den på en sida – men observera att en inre behållare fortfarande krävs. Eller så kan du lägga till en behållare inuti för .navbar
att bara centrera innehållet i en fast eller statisk toppnavigeringsfält .
<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>
Använd någon av de responsiva behållarna för att ändra hur brett innehållet i ditt navigeringsfält visas.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placering
Använd våra positionsverktyg för att placera navigeringsfält i icke-statiska positioner. Välj mellan fast till toppen, fixerad till botten eller sticked till toppen (rullar med sidan tills den når toppen och stannar sedan där). Fasta navfält använder position: fixed
, vilket betyder att de hämtas från det normala flödet av DOM och kan kräva anpassad CSS (t.ex. padding-top
på <body>
) för att förhindra överlappning med andra element.
Observera också att .sticky-top
använder position: sticky
, som inte stöds fullt ut i alla webbläsare .
<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>
Scrollar
Lägg .navbar-nav-scroll
till en .navbar-nav
(eller annan underkomponent för navigeringsfältet) för att möjliggöra vertikal rullning inom det växlingsbara innehållet i ett komprimerat navigeringsfält. Som standard börjar rullningen vid 75vh
(eller 75 % av visningsportens höjd), men du kan åsidosätta det med den lokala anpassade CSS-egenskapen --bs-navbar-height
eller anpassade stilar. Vid större visningsportar när navigeringsfältet utökas, kommer innehållet att visas som det gör i ett standardnavigeringsfält.
Observera att detta beteende kommer med en potentiell nackdel av overflow
—när inställningen overflow-y: auto
(krävs för att rulla innehållet här), overflow-x
motsvarar auto
, vilket kommer att beskära en del horisontellt innehåll.
Här är ett exempel på navigeringsfält som använder .navbar-nav-scroll
med style="--bs-scroll-height: 100px;"
, med några extra marginalverktyg för optimalt avstånd.
<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>
Responsiva beteenden
Navbars kan använda .navbar-toggler
, .navbar-collapse
, och .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klasser för att avgöra när deras innehåll kollapsar bakom en knapp. I kombination med andra verktyg kan du enkelt välja när du vill visa eller dölja vissa element.
För navigeringsfält som aldrig kollapsar, lägg till .navbar-expand
klassen i navigeringsfältet. Lägg inte till någon .navbar-expand
klass för navfält som alltid kollapsar.
Toggler
Navbar-växlare är vänsterjusterade som standard, men skulle de följa ett syskonelement som en .navbar-brand
, kommer de automatiskt att justeras längst till höger. Om du vänder om din markering vänder du placeringen av växlaren. Nedan finns exempel på olika växlingsstilar.
Utan .navbar-brand
att visas vid den minsta brytpunkten:
<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>
Med ett varumärke som visas till vänster och växling till höger:
<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>
Med en växlare till vänster och varumärke till höger:
<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>
Externt innehåll
Ibland vill du använda kollaps-pluginet för att trigga ett containerelement för innehåll som strukturellt sitter utanför .navbar
. Eftersom vårt plugin fungerar på id
och data-bs-target
matchning är det enkelt att göra!
<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>
När du gör detta rekommenderar vi att du inkluderar ytterligare JavaScript för att flytta fokus programmatiskt till behållaren när den öppnas. Annars kommer tangentbordsanvändare och användare av hjälpmedel sannolikt att ha svårt att hitta det nyligen avslöjade innehållet - särskilt om behållaren som öppnades kommer före växlaren i dokumentets struktur. Vi rekommenderar också att se till att växlaren har aria-controls
attributet som pekar på id
innehållsbehållaren. I teorin tillåter detta hjälpmedelsanvändare att hoppa direkt från växeln till behållaren den kontrollerar – men stödet för detta är för närvarande ganska ojämnt.
Sass
Variabler
$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;
Slinga
Responsiva navbar expandera/komprimera klasser (t.ex. .navbar-expand-lg
) kombineras med $breakpoints
kartan och genereras genom en loop i 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;
}
}
}
}
}