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
.navbar
med.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-print
till 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 ettrole="navigation"
i varje navigeringsfält för att uttryckligen identifiera det som ett landmärkesområde för användare av hjälpmedel.
prefers-reduced-motion
mediefrå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-brand
för ditt företags-, produkt- eller projektnamn..navbar-nav
för en fullhöjd och lätt navigering (inklusive stöd för rullgardinsmenyn)..navbar-toggler
för användning med vårt kollaps-plugin och andra navigeringsväxlingsbeteenden ..form-inline
för alla former av kontroller och åtgärder..navbar-text
för att lägga till vertikalt centrerade textsträngar..collapse.navbar-collapse
fö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-brand
kan 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-brand
kommer 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 .nav
alternativ 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-link
s 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-item
och .nav-link
som 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 .navbar
anvä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-color
verktyg. Välj mellan .navbar-light
för användning med ljusa bakgrundsfärger eller .navbar-dark
fö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 .container
för att centrera den på en sida. Eller så kan du lägga till en behållare inuti för .navbar
att 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-top
på <body>
) för att förhindra överlappning med andra element.
Observera också att .sticky-top
anvä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-scroll
till 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-x
motsvarar auto
, vilket kommer att beskära en del horisontellt innehåll.
Här är ett exempel på navigeringsfält som använder .navbar-nav-scroll
med 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-expand
klassen i navigeringsfältet. Lägg inte till någon .navbar-expand
klass 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-brand
att 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å id
och data-target
matchning är det enkelt att göra!
<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-controls
attributet som pekar på id
innehå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.