Bootstrap 4 navigatiebalk
Navigatiebalken
Een navigatiebalk is een navigatiekop die bovenaan de pagina wordt geplaatst:
Basis navigatie
Met Bootstrap kan een navigatiebalk uit- of inklappen, afhankelijk van de schermgrootte.
Er wordt een standaard navigatiebalk gemaakt met de .navbar
klasse, gevolgd door een responsieve inklapbare klasse: .navbar-expand-xl|lg|md|sm
(stapelt de navigatiebalk verticaal op extra grote, grote, middelgrote of kleine schermen).
Gebruik een <ul>element met om links in de navigatiebalk toe te voegen class="navbar-nav". Voeg vervolgens <li>elementen toe met een .nav-itemklasse gevolgd door een <a>element met een .nav-linkklasse:
Voorbeeld
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Verticale navigatiebalk
Verwijder de .navbar-expand-xl|lg|md|smklasse om een verticale navigatiebalk te maken:
Voorbeeld
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Gecentreerde navigatie
Voeg de .justify-content-centerklasse toe om de navigatiebalk te centreren.
In het volgende voorbeeld wordt de navigatiebalk gecentreerd op middelgrote, grote en extra grote schermen. Op kleine schermen wordt het verticaal en links uitgelijnd weergegeven (vanwege de klasse .navbar-expand-sm):
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Gekleurde Navbar
Gebruik een van de .bg-colorklassen om de achtergrondkleur van de navigatiebalk te wijzigen ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darken .bg-light)
Tip: Voeg een witte tekstkleur toe aan alle links in de navigatiebalk met de .navbar-darkklas, of gebruik de .navbar-lightklas om een
zwarte tekstkleur toe te voegen.
Voorbeeld
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Actieve/uitgeschakelde status : voeg de .activeklasse toe aan een
<a>element om de huidige link te markeren, of de .disabledklasse om aan te geven dat de link niet-klikbaar is.
Brand logo
De .navbar-brandklasse wordt gebruikt om het merk/logo/projectnaam van uw pagina te markeren:
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Wanneer de .navbar-brandklasse op afbeeldingen wordt gebruikt, zal Bootstrap 4 de afbeelding automatisch opmaken zodat deze verticaal in de navigatiebalk past.
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
De navigatiebalk samenvouwen
Heel vaak, vooral op kleine schermen, wil je de navigatielinks verbergen en vervangen door een knop die ze zou moeten onthullen wanneer erop wordt geklikt.
Gebruik een knop met om een inklapbare navigatiebalk te maken . Wikkel vervolgens de inhoud van de navigatiebalk (links, enz.) in een div-element met , gevolgd door een id die overeenkomt met die van de knop: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Voorbeeld
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Tip: U kunt ook de klasse .navbar-expand-md verwijderen om de navigatiebalkkoppelingen ALTIJD te verbergen en de schakelknop weer te geven.
Navigatiebalk met vervolgkeuzelijst
Navigatiebalken kunnen ook vervolgkeuzemenu's bevatten:
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Navbar-formulieren en -knoppen
Voeg een <form>element toe met class="form-inline"om ingangen en knoppen naast elkaar te groeperen:
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
U kunt ook andere invoerklassen gebruiken, zoals .input-group-prependof .input-group-appendom een pictogram of helptekst naast het invoerveld te plaatsen. U leert meer over deze klassen in het hoofdstuk Bootstrap-invoer.
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Navigatietekst
Gebruik de .navbar-textklasse om alle elementen in de navigatiebalk die geen links zijn verticaal uit te lijnen (zorgt voor de juiste opvulling en tekstkleur).
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Vaste navigatiebalk
De navigatiebalk kan ook bovenaan of onderaan de pagina worden vastgezet.
Een vaste navigatiebalk blijft zichtbaar op een vaste positie (boven of onder) onafhankelijk van het scrollen op de pagina.
De .fixed-topklasse maakt de navigatiebalk bovenaan vast :
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Gebruik de .fixed-bottomklasse om de navigatiebalk onder aan de pagina te laten staan:
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>