in English

navigatiesysteem

Documentatie en voorbeelden voor Bootstrap's krachtige, responsieve navigatiekop, de navbar. Bevat ondersteuning voor branding, navigatie, inklapplug-in en meer.

Hoe het werkt

Dit is wat u moet weten voordat u aan de slag gaat met de navigatiebalk:

Navbars vereisen een verpakking .navbarmet .navbar-expand{-sm|-md|-lg|-xl}voor responsieve inklap- en kleurenschemaklassen .
Navigatiebalken en hun inhoud zijn standaard vloeiend. Gebruik optionele containers om hun horizontale breedte 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.
Navigatiebalken zijn standaard verborgen tijdens het afdrukken. Forceer ze om te worden afgedrukt door toe te voegen .d-printaan de .navbar. Zie de weergavehulpprogrammaklasse .
Zorg voor toegankelijkheid door een <nav>element te gebruiken of, bij gebruik van een meer generiek element zoals een <div>, een role="navigation"aan elke navigatiebalk toe te voegen om deze expliciet te identificeren als een herkenningspunt voor gebruikers van ondersteunende technologieën.

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. 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-brandvoor uw bedrijfs-, product- of projectnaam.
.navbar-navvoor een volledige hoogte en lichtgewicht navigatie (inclusief ondersteuning voor dropdowns).
.navbar-togglervoor gebruik met onze inklapplug-in en ander navigatiewisselgedrag .
.form-inlinevoor alle formulierbesturingen en acties.
.navbar-textvoor het toevoegen van verticaal gecentreerde tekstreeksen.
.collapse.navbar-collapsevoor het groeperen en verbergen van de inhoud van de navigatiebalk door een bovenliggend breekpunt.

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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

In dit voorbeeld worden de hulpprogrammaklassen kleur ( bg-light) en spatiëring ( my-2, my-lg-0, mr-sm-0, ) gebruikt.my-sm-0

Merk

Het .navbar-brandkan op de meeste elementen worden toegepast, maar een anker werkt het beste, omdat voor sommige elementen hulpprogrammaklassen of aangepaste stijlen nodig zijn.

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

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

Het toevoegen van afbeeldingen aan de afbeelding .navbar-brandvereist waarschijnlijk altijd aangepaste stijlen of hulpprogramma's om de juiste grootte te krijgen. Hier zijn enkele voorbeelden om te demonstreren.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

navigatie

Navbar-navigatielinks bouwen voort op onze .navopties 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.

Actieve statussen - met .active-om aan te geven dat de huidige pagina direct kan worden toegepast op .nav-links of hun directe bovenliggende .nav-items.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">Disabled</a>
      </li>
    </ul>
  </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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </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-itemen .nav-linkzoals hieronder weergegeven.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formulieren

Plaats verschillende formulierbesturingselementen en componenten in een navigatiebalk met .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Onmiddellijke onderliggende elementen van .navbargebruik 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">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Inputgroepen werken ook:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Mix en match met andere componenten en hulpprogramma's als dat nodig is.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Kleurenschema's

Het thema van de navigatiebalk is nog nooit zo eenvoudig geweest dankzij de combinatie van themaklassen en background-colorhulpprogramma's. Kies uit .navbar-lightvoor gebruik met lichte achtergrondkleuren, of .navbar-darkvoor 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 dit niet vereist is, kunt u een navigatiebalk in a .containerplaatsen om deze op een pagina te centreren. Of u kunt een container aan de binnenkant toevoegen .navbarom 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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Wanneer de container zich binnen uw navigatiebalk bevindt, wordt de horizontale opvulling verwijderd op breekpunten lager dan de door u opgegeven .navbar-expand{-sm|-md|-lg|-xl}klasse. Dit zorgt ervoor dat we de opvulling niet onnodig verdubbelen op lagere kijkvensters wanneer uw navigatiebalk is ingeklapt.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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-topop de <body>) om overlapping met andere elementen te voorkomen.

Houd er ook rekening mee dat .sticky-topgebruikt position: sticky, dat niet volledig wordt ondersteund in elke browser .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Scrollen

Voeg toe .navbar-nav-scrollaan een .navbar-collapse(of ander subonderdeel van de navigatiebalk) om verticaal scrollen mogelijk te maken binnen de schakelbare inhoud van een samengevouwen navigatiebalk. Scrollen begint standaard op 75vh(of 75% van de kijkvensterhoogte), maar u kunt dat overschrijven met inline 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-xhet equivalent is van auto, waardoor een deel van de horizontale inhoud wordt bijgesneden.

Hier is een voorbeeld van een navigatiebalk die gebruikt .navbar-nav-scrollmet style="max-height: 100px;", met enkele extra margehulpprogramma's voor optimale spatiëring.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <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">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Responsief gedrag

Navbars kunnen .navbar-toggler, .navbar-collapse, en .navbar-expand{-sm|-md|-lg|-xl}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-expandklasse toe aan de navigatiebalk. Voeg geen .navbar-expandklasse 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-brandgetoond bij het kleinste breekpunt:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Met links een merknaam en rechts een schakelaar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Met een schakelaar aan de linkerkant en merknaam aan de rechterkant:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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 iden data-targetmatching, is dat eenvoudig gedaan!

Samengevouwen inhoud

Schakelbaar via het merk navbar.

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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-controlsattribuut heeft, wijzend naar idde 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.