Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Bootstrap 5.2 / Componenten

Navbar

Documentatie en voorbeelden voor de krachtige, responsieve navigatiekop van Bootstrap: de navbar. Inclusief ondersteuning voor branding, navigatie en meer, plus ondersteuning voor onze collapse-plugin.

Hoe het werkt

Dit moet je weten voordat je met de navbar aan de slag gaat:

  • Navbars vereisen een omhullende .navbar met .navbar-expand{-sm|-md|-lg|-xl|-xxl} voor responsief inklappen, plus kleurschema-klassen.
  • Navbars en hun inhoud zijn standaard fluid. Wijzig de container om hun horizontale breedte op verschillende manieren te beperken.
  • Gebruik onze spacing- en flex-utility-klassen om tussenruimte en uitlijning binnen navbars te sturen.
  • Navbars zijn standaard responsief, maar je kunt dat eenvoudig aanpassen. Het responsieve gedrag is afhankelijk van onze Collapse-JavaScript-plugin.
  • Zorg voor toegankelijkheid door een <nav>-element te gebruiken, of voeg bij een algemener element zoals een <div> role="navigation" aan elke navbar toe om die expliciet als landmark-gebied voor gebruikers van hulptechnologieën te markeren.
  • Geef het huidige item aan met aria-current="page" voor de huidige pagina of aria-current="true" voor het huidige item in een set.
  • Nieuw in v5.2.0: navbars kunnen van een thema worden voorzien met CSS-variabelen die tot de basisklasse .navbar beperkt zijn. .navbar-light is verouderd en .navbar-dark is herschreven zodat die CSS-variabelen overschrijft in plaats van extra stijlen toe te voegen.
Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Ondersteunde content

Navbars hebben ingebouwde ondersteuning voor een handvol subcomponenten. Kies naar behoefte uit het volgende:

  • .navbar-brand voor de naam van je bedrijf, product of project.
  • .navbar-nav voor lichtgewicht navigatie over de volledige hoogte (inclusief ondersteuning voor dropdowns).
  • .navbar-toggler voor gebruik met onze collapse-plugin en ander navigatieschakelgedrag.
  • Flex- en spacing-utilities voor formulierbesturingselementen en acties.
  • .navbar-text om verticaal gecentreerde stukjes tekst toe te voegen.
  • .collapse.navbar-collapse om navbar-content te groeperen en per breakpoint te verbergen.
  • Voeg optioneel .navbar-scroll toe om een max-height in te stellen en uitgeklapte navbar-content te laten scrollen.

Hier is een voorbeeld van alle subcomponenten in een responsieve navbar met licht thema die automatisch inklapt op het lg-breakpoint (large).

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Actie</a></li>
            <li><a class="dropdown-item" href="#">Nog een actie</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Uitgeschakeld</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
        <button class="btn btn-outline-success" type="submit">Zoeken</button>
      </form>
    </div>
  </div>
</nav>

Dit voorbeeld gebruikt utility-klassen voor achtergrond (bg-light) en spacing (me-auto, mb-2, mb-lg-0, me-2).

Brand

De .navbar-brand kan op de meeste elementen worden toegepast, maar een anker werkt het best, omdat sommige elementen utility-klassen of eigen stijlen nodig hebben.

Tekst

Zet je tekst binnen een element met de klasse .navbar-brand.

HTML
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Afbeelding

Je kunt de tekst binnen de .navbar-brand vervangen door een <img>.

HTML
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Afbeelding en tekst

Je kunt ook een paar extra utilities gebruiken om tegelijk een afbeelding en tekst toe te voegen. Let op de toevoeging van .d-inline-block en .align-text-top op de <img>.

HTML
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Navigatielinks in de navbar bouwen voort op onze .nav-opties met een eigen modifier-klasse en vereisen toggler-klassen voor de juiste responsieve styling. Navigatie in navbars groeit ook mee om zo veel mogelijk horizontale ruimte in te nemen, zodat de inhoud van je navbar netjes uitgelijnd blijft.

Voeg de klasse .active toe aan .nav-link om de huidige pagina aan te geven.

Let op: je hoort ook het attribuut aria-current op de actieve .nav-link te zetten.

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <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="#">Functies</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Prijzen</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Uitgeschakeld</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

En omdat we klassen voor onze navs gebruiken, kun je de op lijsten gebaseerde aanpak desgewenst helemaal overslaan.

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <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="#">Functies</a>
        <a class="nav-link" href="#">Prijzen</a>
        <a class="nav-link disabled">Uitgeschakeld</a>
      </div>
    </div>
  </div>
</nav>

Je kunt ook dropdowns in je navbar gebruiken. Dropdownmenu's hebben voor de positionering een omhullend element nodig, dus gebruik aparte, geneste elementen voor .nav-item en .nav-link, zoals hieronder.

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <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="#">Functies</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Prijzen</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown-link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Actie</a></li>
            <li><a class="dropdown-item" href="#">Nog een actie</a></li>
            <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Formulieren

Plaats diverse formulierbesturingselementen en componenten in een navbar:

HTML
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
      <button class="btn btn-outline-success" type="submit">Zoeken</button>
    </form>
  </div>
</nav>

Direct onderliggende elementen van .navbar gebruiken flex-layout en krijgen standaard justify-content: space-between. Gebruik naar behoefte extra flex-utilities om dat gedrag aan te passen.

HTML
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
      <button class="btn btn-outline-success" type="submit">Zoeken</button>
    </form>
  </div>
</nav>

Input groups werken ook. Is je navbar één groot formulier, of grotendeels een formulier, dan kun je het <form>-element als container gebruiken en wat HTML besparen.

HTML
<nav class="navbar 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="Gebruikersnaam" aria-label="Gebruikersnaam" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Ook diverse knoppen worden in deze navbar-formulieren ondersteund. Dit is meteen een mooie herinnering dat verticale uitlijnings-utilities gebruikt kunnen worden om elementen van verschillende grootte uit te lijnen.

HTML
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Hoofdknop</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Kleinere knop</button>
  </form>
</nav>

Tekst

Navbars kunnen met behulp van .navbar-text stukjes tekst bevatten. Deze klasse past de verticale uitlijning en horizontale tussenruimte voor tekst aan.

HTML
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar-tekst met een inline element
    </span>
  </div>
</nav>

Combineer naar behoefte met andere componenten en utilities.

HTML
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar met tekst</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Navigatie schakelen">
      <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="#">Functies</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Prijzen</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar-tekst met een inline element
      </span>
    </div>
  </div>
</nav>

Kleurschema's

Let op

Nieuw in v5.2.0: navbar-theming wordt nu aangestuurd door CSS-variabelen en .navbar-light is verouderd. CSS-variabelen worden op .navbar toegepast, met standaard het "light"-uiterlijk, en kunnen met .navbar-dark worden overschreven.

Navbar-thema's zijn eenvoudiger dan ooit dankzij de combinatie van Sass en CSS-variabelen in Bootstrap. De standaard is onze "light navbar" voor gebruik met lichte achtergrondkleuren, maar je kunt ook .navbar-dark toepassen voor donkere achtergrondkleuren. Pas het daarna aan met .bg-*-utilities.

HTML
<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Containers

Hoewel het niet verplicht is, kun je een navbar in een .container wikkelen om hem op de pagina te centreren — let er wel op dat er nog steeds een binnenste container nodig is. Of voeg een container binnen de .navbar toe om alleen de inhoud van een fixed of static top navbar te centreren.

HTML
<div class="container">
  <nav class="navbar navbar-expand-lg 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 content in je navbar wordt weergegeven.

HTML
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Plaatsing

Gebruik onze position-utilities om navbars op niet-statische posities te plaatsen. Kies uit vastgezet bovenaan, vastgezet onderaan, plakkend bovenaan (scrollt mee met de pagina tot hij de bovenkant bereikt en blijft daar), of plakkend onderaan (scrollt mee met de pagina tot hij de onderkant bereikt en blijft daar).

Fixed navbars gebruiken position: fixed, wat betekent dat ze uit de normale flow van de DOM worden gehaald en mogelijk eigen CSS vereisen (bijv. padding-top op de <body>) om overlap met andere elementen te voorkomen.

HTML
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Standaard</a>
  </div>
</nav>
HTML
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
HTML
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
HTML
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
HTML
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Scrollen

Voeg .navbar-nav-scroll toe aan een .navbar-nav (of een ander navbar-subcomponent) om verticaal scrollen binnen de schakelbare inhoud van een ingeklapte navbar in te schakelen. Standaard begint het scrollen bij 75vh (of 75% van de viewporthoogte), maar je kunt dat overschrijven met de lokale CSS custom property --bs-navbar-height of met eigen stijlen. Op grotere viewports, wanneer de navbar is uitgeklapt, verschijnt de content zoals in een standaardnavbar.

Let op: dit gedrag heeft een mogelijk nadeel wat overflow betreft — bij het instellen van overflow-y: auto (nodig om de content hier te laten scrollen) staat overflow-x feitelijk op auto, waardoor sommige horizontale content wordt afgekapt.

Hier is een voorbeeldnavbar met .navbar-nav-scroll en style="--bs-scroll-height: 100px;", plus wat extra margin-utilities voor optimale tussenruimte.

HTML
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar met scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Navigatie schakelen">
      <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Actie</a></li>
            <li><a class="dropdown-item" href="#">Nog een actie</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
        <button class="btn btn-outline-success" type="submit">Zoeken</button>
      </form>
    </div>
  </div>
</nav>

Responsief gedrag

Navbars kunnen de klassen .navbar-toggler, .navbar-collapse en .navbar-expand{-sm|-md|-lg|-xl|-xxl} gebruiken om te bepalen wanneer hun content achter een knop inklapt. In combinatie met andere utilities kies je eenvoudig wanneer je bepaalde elementen toont of verbergt.

Voeg voor navbars die nooit inklappen de klasse .navbar-expand aan de navbar toe. Voor navbars die altijd inklappen voeg je helemaal geen .navbar-expand-klasse toe.

Toggler

Navbar-togglers staan standaard links uitgelijnd, maar volgen ze op een aangrenzend element zoals een .navbar-brand, dan worden ze automatisch helemaal rechts uitgelijnd. Draai je markup om en de plaatsing van de toggler draait mee. Hieronder staan voorbeelden van verschillende toggle-stijlen.

Zonder zichtbare .navbar-brand op het kleinste breakpoint:

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Verborgen 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">Uitgeschakeld</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
        <button class="btn btn-outline-success" type="submit">Zoeken</button>
      </form>
    </div>
  </div>
</nav>

Met de merknaam links en de toggler rechts:

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <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">Uitgeschakeld</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
        <button class="btn btn-outline-success" type="submit">Zoeken</button>
      </form>
    </div>
  </div>
</nav>

Met de toggler links en de merknaam rechts:

HTML
<nav class="navbar navbar-expand-lg 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="Navigatie schakelen">
      <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">Uitgeschakeld</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
        <button class="btn btn-outline-success" type="submit">Zoeken</button>
      </form>
    </div>
  </div>
</nav>

Externe content

Soms wil je de collapse-plugin gebruiken om een containerelement te schakelen met content die structureel buiten de .navbar staat. Omdat onze plugin werkt op het matchen van id en data-bs-target, is dat eenvoudig te doen!

HTML
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Ingeklapte content</h5>
    <span class="text-muted">Te schakelen via de 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="Navigatie schakelen">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Doe je dit, dan raden we aan extra JavaScript op te nemen die de focus bij het openen programmatisch naar de container verplaatst. Anders zullen toetsenbordgebruikers en gebruikers van hulptechnologieën de zojuist getoonde content waarschijnlijk moeilijk kunnen vinden — zeker als de geopende container in de documentstructuur vóór de toggler staat. We raden ook aan te zorgen dat de toggler het attribuut aria-controls heeft, dat naar de id van de contentcontainer verwijst. In theorie kunnen gebruikers van hulptechnologie daarmee rechtstreeks van de toggler naar de bijbehorende container springen — maar de ondersteuning daarvoor is momenteel nogal wisselend.

Offcanvas

Verander je uitklapbare en inklapbare navbar in een offcanvas-lade met het offcanvas-component. We breiden zowel de standaard offcanvas-stijlen uit als onze .navbar-expand-*-klassen om een dynamische en flexibele navigatiezijbalk te maken.

Wil je in het onderstaande voorbeeld een offcanvas-navbar die op alle breakpoints altijd ingeklapt is, laat de .navbar-expand-*-klasse dan volledig weg.

HTML
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas-navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Actie</a></li>
              <li><a class="dropdown-item" href="#">Nog een actie</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex mt-3" role="search">
          <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
          <button class="btn btn-outline-success" type="submit">Zoeken</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Wil je een offcanvas-navbar die vanaf een specifiek breakpoint zoals lg uitklapt naar een normale navbar, gebruik dan .navbar-expand-lg.

HTML
<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas-navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Gebruik je offcanvas in een donkere navbar, houd er dan rekening mee dat je mogelijk een donkere achtergrond op de offcanvas-content nodig hebt om te voorkomen dat de tekst onleesbaar wordt. In het onderstaande voorbeeld voegen we .navbar-dark en .bg-dark toe aan de .navbar, .text-bg-dark aan de .offcanvas, .dropdown-menu-dark aan .dropdown-menu en .btn-close-white aan .btn-close voor de juiste styling bij een donkere offcanvas.

HTML
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Donkere offcanvas-navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Donkere offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Actie</a></li>
              <li><a class="dropdown-item" href="#">Nog een actie</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex mt-3" role="search">
          <input class="form-control me-2" type="search" placeholder="Zoeken" aria-label="Zoeken">
          <button class="btn btn-success" type="submit">Zoeken</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken navbars nu lokale CSS-variabelen op .navbar, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_navbar.scss in de Bootstrap-broncode.

Op .navbar-nav zijn ook een aantal extra CSS-variabelen aanwezig:

Standaardwaarden: zie scss/_navbar.scss in de Bootstrap-broncode.

Aanpassen via CSS-variabelen zie je terug bij de klasse .navbar-dark, waar we specifieke waarden overschrijven zonder dubbele CSS-selectors toe te voegen.

Standaardwaarden: zie scss/_navbar.scss in de Bootstrap-broncode.

Sass-variabelen

Variabelen voor alle navbars:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Variabelen voor de donkere navbar:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Sass-loop

Responsieve navbar-klassen voor uit-/inklappen (bijv. .navbar-expand-lg) worden gecombineerd met de $breakpoints-map en via een loop in scss/_navbar.scss gegenereerd.

Standaardwaarden: zie scss/_navbar.scss in de Bootstrap-broncode.