Source

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 .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 .

Lees verder voor een voorbeeld en een lijst met ondersteunde subcomponenten.

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

U kunt ook gebruik maken van dropdowns in uw navigatiebalk. 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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 in .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 wikkelen .containerom deze op een pagina te centreren of er een toevoegen 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">
    <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>

Responsief gedrag

Navbars kunnen .navbar-toggler, .navbar-collapse, en .navbar-expand{-sm|-md|-lg|-xl}klassen gebruiken om te veranderen wanneer hun inhoud achter een knop instort. 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.

Zonder .navbar-brandgetoond in laagste 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 inklapplug-in gebruiken om verborgen inhoud elders op de pagina te activeren. Omdat onze plug-in werkt op de iden data-targetmatching, is dat eenvoudig gedaan!

Samengevouwen inhoud

Schakelbaar via het merk navbar.

<div class="pos-f-t">
  <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>