Source

Navbar

Dokumentation och exempel för Bootstraps kraftfulla, lyhörda navigeringshuvud, navbaren. Inkluderar stöd för varumärkesbyggande, navigering och mer, inklusive stöd för vår kollaps-plugin.

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.

Läs vidare för ett exempel och lista över underkomponenter som stöds.

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="#" 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="#">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.1/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.1/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" href="#">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-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="#">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="#" 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>

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 som .navbaranvänds flex layout och kommer som standard att vara justify-content: 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 navigeringsfält i en .containerför att centrera den på en sida eller lägga till en inom för att bara centrera innehållet i ett fast eller statiskt 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 navfä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>

Responsiva beteenden

Navbars kan använda .navbar-toggler, .navbar-collapse, och .navbar-expand{-sm|-md|-lg|-xl}klasser för att ändra 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 att .navbar-brandvisas i lägsta brytpunkt:

<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="#">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" href="#">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" href="#">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 komprimeringsplugin för att utlösa dolt innehåll någon annanstans på sidan. Eftersom vårt plugin fungerar på idoch data-targetmatchning är det enkelt att göra!

Collapsed content

Toggleable via the navbar brand.

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