Navbar

Dokumentation och exempel för Bootstraps kraftfulla, lyhörda navigeringshuvud, navbaren. Inkluderar stöd för varumärkesbyggande, navigering, komprimeringsplugin och mer.

Hur det fungerar

Här är vad du behöver veta innan du börjar med navigeringsfältet:

Navbars kräver en omslag .navbarmed .navbar-expand{-sm|-md|-lg|-xl}för responsiv kollapsning och färgschemaklasser .
Navbars och deras innehåll är flytande som standard. Använd valfria behållare för att begränsa deras horisontella bredd.
Använd våra avstånds- och flexverktygsklasser för att kontrollera avstånd och justering inom navigeringsfält.
Navbars är lyhörda som standard, men du kan enkelt ändra dem för att ändra det. Responsivt beteende beror på vår Collapse JavaScript-plugin.
Navigationsfält är dolda som standard vid utskrift. Tvinga dem att skrivas ut genom att lägga .d-printtill i .navbar. Se visningsverktygsklassen .
Säkerställ tillgänglighet genom att använda ett <nav>element eller, om du använder ett mer generiskt element som t.ex. ett <div>, lägg till ett role="navigation"i varje navigeringsfält för att uttryckligen identifiera det som ett landmärkesområde för användare av hjälpmedel.

Animeringseffekten av denna komponent beror på prefers-reduced-motionmediefrågan. Se avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .

Innehåll som stöds

Navbars kommer med inbyggt stöd för en handfull delkomponenter. Välj mellan följande efter behov:

.navbar-brandför ditt företags-, produkt- eller projektnamn.
.navbar-navför en fullhöjd och lätt navigering (inklusive stöd för rullgardinsmenyn).
.navbar-togglerför användning med vårt kollaps-plugin och andra navigeringsväxlingsbeteenden .
.form-inlineför alla former av kontroller och åtgärder.
.navbar-textför att lägga till vertikalt centrerade textsträngar.
.collapse.navbar-collapseför att gruppera och dölja navigeringsfältets innehåll efter en överordnad brytpunkt.

Här är ett exempel på alla underkomponenter som ingår i en responsiv navbar med ljustema som automatiskt kollapsar vid den lg(stora) brytpunkten.

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

Det här exemplet använder verktygsklasserna färg ( bg-light) och mellanrum ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

varumärke

Den .navbar-brandkan appliceras på de flesta element, men ett ankare fungerar bäst, eftersom vissa element kan kräva verktygsklasser eller anpassade stilar.

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

Att lägga till bilder i bilden .navbar-brandkommer förmodligen alltid att kräva anpassade stilar eller verktyg för korrekt storlek. Här är några exempel att visa.

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

Nav

Navbar-navigeringslänkar bygger på våra .navalternativ med sin egen modifieringsklass och kräver användning av växlingsklasser för korrekt responsiv styling. Navigering i navigeringsfält kommer också att växa till att uppta så mycket horisontellt utrymme som möjligt för att hålla ditt navigeringsfält säkert justerat.

Aktiva tillstånd—med .active—för att indikera att den aktuella sidan kan tillämpas direkt på .nav-links eller deras närmaste förälder .nav-item.

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

Och eftersom vi använder klasser för våra nav, kan du undvika det listbaserade tillvägagångssättet helt om du vill.

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

Du kan också använda rullgardinsmenyn i navigeringsfältet. Rullgardinsmenyer kräver ett omslutningselement för positionering, så se till att använda separata och kapslade element för .nav-itemoch .nav-linksom visas nedan.

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

Blanketter

Placera olika formulärkontroller och komponenter i ett navigeringsfält med .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>

Omedelbara underordnade element av .navbaranvändning flex layout och kommer som standard till justify-content: space-between. Använd ytterligare flexverktyg efter behov för att justera detta beteende.

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

Inmatningsgrupper fungerar också:

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

Olika knappar stöds också som en del av dessa navigeringsfält. Detta är också en bra påminnelse om att vertikala inriktningsverktyg kan användas för att justera element i olika storlekar.

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

Text

Navbars kan innehålla bitar av text med hjälp av .navbar-text. Den här klassen justerar vertikal justering och horisontellt avstånd för textsträngar.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Blanda och matcha med andra komponenter och verktyg efter behov.

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

Färgscheman

Temaning av navbaren har aldrig varit enklare tack vare kombinationen av temaklasser och background-colorverktyg. Välj mellan .navbar-lightför användning med ljusa bakgrundsfärger eller .navbar-darkför mörka bakgrundsfärger. Anpassa sedan med .bg-*verktyg.

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

Behållare

Även om det inte är nödvändigt, kan du slå in en navbar i en .containerför att centrera den på en sida. Eller så kan du lägga till en behållare inuti för .navbaratt bara centrera innehållet i en fast eller statisk toppnavigeringsfält .

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

När behållaren är inom din navbar tas dess horisontella utfyllnad bort vid brytpunkter lägre än din angivna .navbar-expand{-sm|-md|-lg|-xl}klass. Detta säkerställer att vi inte fördubblar utfyllnaden i onödan på lägre viewports när din navbar är hopfälld.

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

Placering

Använd våra positionsverktyg för att placera navigeringsfält i icke-statiska positioner. Välj mellan fast till toppen, fixerad till botten eller sticked till toppen (rullar med sidan tills den når toppen och stannar sedan där). Fasta navigeringsfält använder position: fixed, vilket betyder att de hämtas från det normala flödet av DOM och kan kräva anpassad CSS (t.ex. padding-toppå <body>) för att förhindra överlappning med andra element.

Observera också att .sticky-topanvänder position: sticky, som inte stöds fullt ut i alla webbläsare .

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

Scrollar

Lägg .navbar-nav-scrolltill en .navbar-collapse(eller annan underkomponent för navigeringsfältet) för att möjliggöra vertikal rullning inom det växlingsbara innehållet i ett komprimerat navigeringsfält. Som standard börjar rullningen vid 75vh(eller 75 % av visningsportens höjd), men du kan åsidosätta det med inline eller anpassade stilar. Vid större visningsportar när navigeringsfältet utökas, kommer innehållet att visas som det gör i ett standardnavigeringsfält.

Observera att detta beteende kommer med en potentiell nackdel av overflow—när inställning overflow-y: auto(krävs för att rulla innehållet här), overflow-xmotsvarar auto, vilket kommer att beskära en del horisontellt innehåll.

Här är ett exempel på navigeringsfält som använder .navbar-nav-scrollmed style="max-height: 100px;", med några extra marginalverktyg för optimalt avstånd.

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

Responsiva beteenden

Navbars kan använda .navbar-toggler, .navbar-collapse, och .navbar-expand{-sm|-md|-lg|-xl}klasser för att avgöra när deras innehåll kollapsar bakom en knapp. I kombination med andra verktyg kan du enkelt välja när du vill visa eller dölja vissa element.

För navigeringsfält som aldrig kollapsar, lägg till .navbar-expandklassen i navigeringsfältet. Lägg inte till någon .navbar-expandklass för navfält som alltid kollapsar.

Toggler

Navbar-växlare är vänsterjusterade som standard, men skulle de följa ett syskonelement som en .navbar-brand, kommer de automatiskt att justeras längst till höger. Om du vänder om din markering vänder du placeringen av växlaren. Nedan finns exempel på olika växlingsstilar.

Utan .navbar-brandatt visas vid den minsta brytpunkten:

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

Med ett varumärke som visas till vänster och växling till höger:

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

Med en växlare till vänster och varumärke till höger:

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

Externt innehåll

Ibland vill du använda kollaps-pluginet för att trigga ett containerelement för innehåll som strukturellt sitter utanför .navbar. Eftersom vårt plugin fungerar på idoch data-targetmatchning är det enkelt att göra!

Komprimerat innehåll

Växlingsbar via varumärket 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>

När du gör detta rekommenderar vi att du inkluderar ytterligare JavaScript för att flytta fokus programmatiskt till behållaren när den öppnas. Annars kommer tangentbordsanvändare och användare av hjälpmedel sannolikt att ha svårt att hitta det nyligen avslöjade innehållet - särskilt om behållaren som öppnades kommer före växlaren i dokumentets struktur. Vi rekommenderar också att se till att växlaren har aria-controlsattributet som pekar på idinnehållsbehållaren. I teorin tillåter detta hjälpmedelsanvändare att hoppa direkt från växeln till behållaren den kontrollerar – men stödet för detta är för närvarande ganska ojämnt.