navigatiesysteem
Documentatie en voorbeelden voor Bootstrap's krachtige, responsieve navigatiekop, de navbar. Bevat ondersteuning voor branding, navigatie en meer, inclusief ondersteuning voor onze inklapplug-in.
Hoe het werkt
Dit is wat u moet weten voordat u aan de slag gaat met de navigatiebalk:
- Navbars vereisen een verpakking
.navbar
met.navbar-expand{-sm|-md|-lg|-xl|-xxl}
voor responsieve inklap- en kleurenschemaklassen . - Navigatiebalken en hun inhoud zijn standaard vloeiend. Wijzig de container om hun horizontale breedte op verschillende manieren te beperken.
- Gebruik onze spatiërings- en flex -hulpprogrammaklassen voor het regelen van spatiëring en uitlijning binnen navigatiebalken.
- Navbars zijn standaard responsief, maar u kunt ze eenvoudig aanpassen om dat te veranderen. Responsief gedrag is afhankelijk van onze Collapse JavaScript-plug-in.
- Zorg voor toegankelijkheid door een
<nav>
element te gebruiken of, bij gebruik van een meer generiek element zoals een<div>
, eenrole="navigation"
aan elke navigatiebalk toe te voegen om deze expliciet te identificeren als een herkenningspunt voor gebruikers van ondersteunende technologieën. - Geef het huidige item aan door te gebruiken
aria-current="page"
voor de huidige pagina ofaria-current="true"
voor het huidige item in een set.
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
Ondersteunde inhoud
Navbars worden geleverd met ingebouwde ondersteuning voor een handvol subcomponenten. Kies indien nodig uit het volgende:
.navbar-brand
voor uw bedrijfs-, product- of projectnaam..navbar-nav
voor een volledige hoogte en lichtgewicht navigatie (inclusief ondersteuning voor dropdowns)..navbar-toggler
voor gebruik met onze inklapplug-in en ander navigatiewisselgedrag .- Hulpprogramma's voor flex en spatiëring voor elk formulierbesturingselement en -actie.
.navbar-text
voor het toevoegen van verticaal gecentreerde tekstreeksen..collapse.navbar-collapse
voor het groeperen en verbergen van de inhoud van de navigatiebalk door een bovenliggend breekpunt.- Voeg een optioneel
.navbar-scroll
toe om een uitgevouwen navigatiebalk in te stellenmax-height
en te scrollen .
Hier is een voorbeeld van alle subcomponenten die zijn opgenomen in een responsieve navigatiebalk met lichtthema die automatisch inklapt op het lg
(grote) breekpunt.
<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>
In dit voorbeeld worden achtergrond- ( bg-light
) en spatiëringsklassen ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) gebruikt.
Merk
Het .navbar-brand
kan op de meeste elementen worden toegepast, maar een anker werkt het beste, omdat voor sommige elementen hulpprogrammaklassen of aangepaste stijlen nodig zijn.
Tekst
Voeg uw tekst toe binnen een element met de .navbar-brand
klasse.
<!-- 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>
Afbeelding
U kunt de tekst in de tekst vervangen .navbar-brand
door een <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>
Afbeelding en tekst
U kunt ook gebruik maken van enkele extra hulpprogramma's om tegelijkertijd een afbeelding en tekst toe te voegen. Let op de toevoeging van .d-inline-block
en .align-text-top
op de <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>
navigatie
Navbar-navigatielinks bouwen voort op onze .nav
opties met hun eigen modificatieklasse en vereisen het gebruik van schakelklassen voor een juiste responsieve styling. Navigatie in navigatiebalken zal ook groeien om zoveel mogelijk horizontale ruimte in te nemen om de inhoud van uw navigatiebalk veilig uitgelijnd te houden.
Voeg de .active
klas .nav-link
toe om de huidige pagina aan te geven.
Houd er rekening mee dat u het aria-current
kenmerk ook moet toevoegen aan het actieve .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>
En omdat we klassen voor onze navigatie gebruiken, kunt u de op lijsten gebaseerde benadering volledig vermijden als u dat wilt.
<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>
Je kunt ook dropdowns in je navigatiebalk gebruiken. Vervolgkeuzemenu's vereisen een terugloopelement voor positionering, dus zorg ervoor dat u aparte en geneste elementen gebruikt voor .nav-item
en .nav-link
zoals hieronder weergegeven.
<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>
Formulieren
Plaats verschillende formulierbesturingselementen en componenten in een navigatiebalk:
<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>
Onmiddellijke onderliggende elementen van .navbar
gebruik flex layout en zullen standaard justify-content: space-between
. Gebruik indien nodig extra flexhulpprogramma's om dit gedrag aan te passen.
<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>
Inputgroepen werken ook. Als uw navigatiebalk een volledig formulier is, of meestal een formulier, kunt u het <form>
element als container gebruiken en wat HTML opslaan.
<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>
Verschillende knoppen worden ook ondersteund als onderdeel van deze navigatiebalkformulieren. Dit is ook een goede herinnering dat verticale uitlijnhulpprogramma's kunnen worden gebruikt om elementen van verschillende grootte uit te lijnen.
<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>
Tekst
Navigatiebalken kunnen stukjes tekst bevatten met behulp van .navbar-text
. Deze klasse past de verticale uitlijning en horizontale afstand voor tekstreeksen aan.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Mix en match met andere componenten en hulpprogramma's als dat nodig is.
<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>
Kleurenschema's
Het thema van de navigatiebalk is nog nooit zo eenvoudig geweest dankzij de combinatie van themaklassen en background-color
hulpprogramma's. Kies uit .navbar-light
voor gebruik met lichte achtergrondkleuren, of .navbar-dark
voor donkere achtergrondkleuren. Pas het vervolgens aan met .bg-*
hulpprogramma's.
<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>
containers
Hoewel het niet vereist is, kunt u een navigatiebalk in een a wikkelen .container
om deze op een pagina te centreren, maar houd er rekening mee dat een binnencontainer nog steeds vereist is. Of u kunt een container aan de binnenkant toevoegen .navbar
om alleen de inhoud van een vaste of statische navigatiebalk bovenaan te centreren .
<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>
Gebruik een van de responsieve containers om te wijzigen hoe breed de inhoud in uw navigatiebalk wordt weergegeven.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Plaatsing
Gebruik onze positiehulpprogramma 's om navigatiebalken in niet-statische posities te plaatsen. Kies uit vast aan de bovenkant, vast aan de onderkant of vastgeplakt aan de bovenkant (scrollt met de pagina totdat deze de bovenkant bereikt en blijft daar). Vaste navigatiebalken gebruiken position: fixed
, wat betekent dat ze uit de normale stroom van de DOM worden gehaald en mogelijk aangepaste CSS vereisen (bijvoorbeeld padding-top
op de <body>
) om overlapping met andere elementen te voorkomen.
Houd er ook rekening mee dat .sticky-top
gebruikt position: sticky
, dat niet volledig wordt ondersteund in elke 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>
Scrollen
Voeg toe .navbar-nav-scroll
aan een .navbar-nav
(of ander subonderdeel van de navigatiebalk) om verticaal scrollen mogelijk te maken binnen de schakelbare inhoud van een samengevouwen navigatiebalk. Standaard begint scrollen op 75vh
(of 75% van de viewport-hoogte), maar u kunt dat overschrijven met de lokale aangepaste CSS-eigenschap --bs-navbar-height
of aangepaste stijlen. Bij grotere viewports, wanneer de navigatiebalk is uitgevouwen, wordt de inhoud weergegeven zoals in een standaardnavbar.
Houd er rekening mee dat dit gedrag gepaard gaat met een potentieel nadeel van overflow
—wanneer instelling overflow-y: auto
(vereist om hier door de inhoud te scrollen), overflow-x
het equivalent is van auto
, waardoor een deel van de horizontale inhoud wordt bijgesneden.
Hier is een voorbeeld van een navigatiebalk waarin wordt gebruikt .navbar-nav-scroll
met style="--bs-scroll-height: 100px;"
, met enkele extra margehulpprogramma's voor optimale spatiëring.
<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>
Responsief gedrag
Navbars kunnen .navbar-toggler
, .navbar-collapse
, en .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klassen gebruiken om te bepalen wanneer hun inhoud achter een knop inklapt. In combinatie met andere hulpprogramma's kunt u eenvoudig kiezen wanneer u bepaalde elementen wilt weergeven of verbergen.
Voor navigatiebalken die nooit inklappen, voegt u de .navbar-expand
klasse toe aan de navigatiebalk. Voeg geen .navbar-expand
klasse toe voor navigatiebalken die altijd samenvouwen.
Toggler
Navbar-schakelaars zijn standaard links uitgelijnd, maar als ze een broer of zus-element zoals een volgen .navbar-brand
, worden ze automatisch uiterst rechts uitgelijnd. Als u uw opmaak omdraait, wordt de plaatsing van de toggler omgekeerd. Hieronder staan voorbeelden van verschillende schakelstijlen.
Met geen .navbar-brand
getoond bij het kleinste breekpunt:
<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>
Met links een merknaam en rechts een schakelaar:
<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>
Met een schakelaar aan de linkerkant en merknaam aan de rechterkant:
<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>
Externe inhoud
Soms wil je de instortingsplug-in gebruiken om een containerelement te activeren voor inhoud die structureel buiten het .navbar
. Omdat onze plug-in werkt op de id
en data-bs-target
matching, is dat eenvoudig gedaan!
<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>
Wanneer u dit doet, raden we u aan extra JavaScript op te nemen om de focus programmatisch naar de container te verplaatsen wanneer deze wordt geopend. Anders zullen toetsenbordgebruikers en gebruikers van ondersteunende technologieën waarschijnlijk moeite hebben om de nieuw onthulde inhoud te vinden - vooral als de container die werd geopend vóór de schakelaar in de structuur van het document komt. We raden u ook aan ervoor te zorgen dat de toggler het aria-controls
attribuut heeft, wijzend naar id
de inhoudscontainer. In theorie stelt dit gebruikers van ondersteunende technologie in staat om rechtstreeks van de schakelaar naar de container te springen die het bestuurt, maar de ondersteuning hiervoor is momenteel nogal fragmentarisch.
Sass
Variabelen
$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;
Lus
Responsieve navbar-uitbreidings-/samenklapklassen (bijv. .navbar-expand-lg
) worden gecombineerd met de $breakpoints
kaart en gegenereerd via een lus 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;
}
}
}
}
}