Nav och flikar

Dokumentation och exempel för hur du använder Bootstraps medföljande navigationskomponenter.

På den här sidan

Basnav

Navigering tillgänglig i Bootstrap delar generell uppmärkning och stilar, från basklassen .navtill aktiva och inaktiverade tillstånd. Byt modifieringsklasser för att växla mellan varje stil.

Baskomponenten .navär byggd med flexbox och ger en stark grund för att bygga alla typer av navigationskomponenter. Den innehåller vissa stilöverstyrningar (för att arbeta med listor), en del länkutfyllnad för större träffområden och grundläggande funktionshindrade styling.

Baskomponenten .navinkluderar inte något .activetillstånd. Följande exempel inkluderar klassen, främst för att visa att just denna klass inte utlöser någon speciell styling.

För att förmedla det aktiva tillståndet till hjälpmedelstekniker, använd aria-currentattributet — med pagevärdet för aktuell sida eller trueför det aktuella föremålet i en uppsättning.

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Klasser används genomgående, så din uppmärkning kan vara superflexibel. Använd <ul>s som ovan, <ol>om ordningen på dina föremål är viktig, eller rulla din egen med ett <nav>element. Eftersom de .navanvänder display: flex, fungerar nav-länkarna på samma sätt som nav-objekt, men utan extra uppmärkning.

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Tillgängliga stilar

Ändra stilen på .navs-komponenten med modifierare och verktyg. Mixa och matcha efter behov, eller bygg din egen.

Horisontell linjering

Ändra den horisontella justeringen av din nav med flexbox-verktyg . Som standard är nav vänsterjusterade, men du kan enkelt ändra dem till mitt- eller högerjusterade.

Centrerad med .justify-content-center:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Högerjusterad med .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Vertikal

Stapla din navigering genom att ändra flexobjektets riktning med .flex-columnverktyget. Behöver du stapla dem på vissa visningsportar men inte andra? Använd de responsiva versionerna (t.ex. .flex-sm-column).

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Som alltid är vertikal navigering <ul>också möjlig utan s.

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Flikar

Tar den grundläggande navigeringen ovanifrån och lägger till .nav-tabsklassen för att skapa ett flikgränssnitt. Använd dem för att skapa flikområden med vårt JavaScript-plugin för flikar .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Biljard

Ta samma HTML, men använd .nav-pillsistället:

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Fyll och motivera

Tvinga ditt .navinnehåll att utöka den fulla tillgängliga bredden en av två modifieringsklasser. För att proportionellt fylla allt tillgängligt utrymme med dina .nav-items, använd .nav-fill. Lägg märke till att allt horisontellt utrymme är upptaget, men inte alla navigeringsobjekt har samma bredd.

html

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

När du använder en <nav>-baserad navigering kan du säkert utelämna .nav-itemeftersom endast .nav-linkkrävs för stylingelement <a>.

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

För element med lika bredd, använd .nav-justified. Allt horisontellt utrymme kommer att upptas av nav-länkar, men till skillnad från .nav-fillovanstående kommer varje nav-objekt att ha samma bredd.

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

Liknar .nav-fillexemplet med en <nav>-baserad navigering.

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Arbeta med flexverktyg

Om du behöver responsiva nav-varianter kan du överväga att använda en serie flexbox-verktyg . Även om de är mer omfattande erbjuder dessa verktyg större anpassning över responsiva brytpunkter. I exemplet nedan kommer vår nav att staplas på den lägsta brytpunkten och sedan anpassas till en horisontell layout som fyller den tillgängliga bredden från den lilla brytpunkten.

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

Angående tillgänglighet

Om du använder navigeringsverktyg för att tillhandahålla ett navigeringsfält, se till att lägga till en role="navigation"i den mest logiska överordnade behållaren för <ul>, eller linda ett <nav>element runt hela navigeringen. Lägg inte till rollen till sig <ul>själv, eftersom detta skulle förhindra att den annonseras som en faktisk lista av hjälpmedel.

Observera att navigeringsfält, även om de är visuellt utformade som flikar med .nav-tabsklassen, inte ska ges role="tablist", role="tab"eller role="tabpanel"attribut. Dessa är endast lämpliga för dynamiska flikar, som beskrivs i ARIA Authoring Practices Guide-flikmönster . Se JavaScript-beteende för dynamiska flikar i det här avsnittet för ett exempel. Attributet aria-currentär inte nödvändigt på dynamiska flikar eftersom vårt JavaScript hanterar det valda tillståndet genom att lägga till aria-selected="true"på den aktiva fliken.

Använder rullgardinsmenyn

Lägg till rullgardinsmenyer med lite extra HTML och rullgardinsmenyn JavaScript-plugin .

Flikar med rullgardinsmenyer

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Piller med dropdowns

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

CSS

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder nav nu lokala CSS-variabler på .nav, .nav-tabs, och .nav-pillsför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

På .navbasklassen:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

På .nav-tabsmodifieringsklassen:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

På .nav-pillsmodifieringsklassen:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass variabler

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript-beteende

Använd fliken JavaScript-plugin – inkludera den individuellt eller genom den kompilerade bootstrap.jsfilen – för att utöka våra navigeringsflikar och piller för att skapa flikar med lokalt innehåll.

Detta är visst platshållarinnehåll på fliken Hems associerade innehåll. Om du klickar på en annan flik ändras synligheten för denna för nästa. Fliken JavaScript byter klasser för att kontrollera innehållets synlighet och stil. Du kan använda den med flikar, piller och vilken annan .navnavigering som helst.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

För att passa dina behov fungerar detta med <ul>-baserad uppmärkning, som visas ovan, eller med valfri "rulla din egen" uppmärkning. Observera att om du använder <nav>, bör du inte lägga role="tablist"till direkt i den, eftersom detta skulle åsidosätta elementets ursprungliga roll som navigeringslandmärke. Byt istället till ett alternativt element (i exemplet nedan, en enkel <div>) och linda <nav>runt det.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Tabs-pluginet fungerar också med piller.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Och med vertikala piller. För vertikala flikar bör du helst också lägga aria-orientation="vertical"till i fliklistans behållare.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Tillgänglighet

Dynamiska gränssnitt med flikar, som beskrivs i ARIA Authoring Practices Guide-flikmönster , kräver role="tablist", role="tab", role="tabpanel", och ytterligare aria-attribut för att förmedla deras struktur, funktionalitet och aktuella tillstånd till användare av hjälpmedelstekniker (som skärmläsare). Som en bästa praxis rekommenderar vi att du använder <button>element för flikarna, eftersom dessa är kontroller som utlöser en dynamisk förändring, snarare än länkar som navigerar till en ny sida eller plats.

I linje med ARIA Authoring Practices-mönstret är det bara den för närvarande aktiva fliken som får tangentbordsfokus. När JavaScript-pluginen initieras kommer den att ställas in tabindex="-1"på alla inaktiva flikkontroller. När den för närvarande aktiva fliken har fokus, aktiverar markörtangenterna föregående/nästa flik, med plugin-programmet som ändrar rovingtabindex i enlighet med detta. Observera dock att JavaScript-pluginet inte skiljer mellan horisontella och vertikala fliklistor när det gäller markörtangenternas interaktioner: oavsett fliklistans orientering går både upp- och vänstermarkören till föregående flik, och markören ner och höger går till nästa flik.

I allmänhet, för att underlätta tangentbordsnavigering, rekommenderas det att göra själva flikpanelerna fokuserbara, såvida inte det första elementet som innehåller meningsfullt innehåll inuti flikpanelen redan är fokuserbart. JavaScript-pluginet försöker inte hantera den här aspekten – där så är lämpligt måste du uttryckligen göra dina flikpaneler fokuserbara genom att lägga tabindex="0"till din markering.

Fliken JavaScript-plugin stöder inte flikgränssnitt som innehåller rullgardinsmenyer, eftersom dessa orsakar både användbarhets- och tillgänglighetsproblem. Ur ett användbarhetsperspektiv kan det faktum att den aktuella visade flikens triggerelement inte är omedelbart synligt (eftersom det finns i den stängda rullgardinsmenyn) orsaka förvirring. Ur tillgänglighetssynpunkt finns det för närvarande inget vettigt sätt att kartlägga denna typ av konstruktion till ett standard WAI ARIA-mönster, vilket innebär att det inte lätt kan göras begripligt för användare av hjälpmedelsteknik.

Använda dataattribut

Du kan aktivera en navigering med flikar eller piller utan att skriva något JavaScript genom att helt enkelt ange data-bs-toggle="tab"eller data-bs-toggle="pill"på ett element. Använd dessa dataattribut på .nav-tabseller .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Via JavaScript

Aktivera flikar via JavaScript (varje flik måste aktiveras individuellt):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Du kan aktivera enskilda flikar på flera sätt:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Tona effekt

För att få flikar att tona in, lägg .fadetill varje .tab-pane. Den första flikrutan måste också .showgöra det ursprungliga innehållet synligt.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Metoder

Asynkrona metoder och övergångar

Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

Se vår JavaScript-dokumentation för mer information .

Aktiverar ditt innehåll som ett flikelement.

Du kan skapa en flikinstans med konstruktorn, till exempel:

const bsTab = new bootstrap.Tab('#myTab')

Metod	Beskrivning
`dispose`	Förstör ett elements flik.
`getInstance`	Statisk metod som låter dig få tabbinstansen associerad med ett DOM-element, du kan använda den så här: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statisk metod som returnerar en tabbinstans som är kopplad till ett DOM-element eller skapar en ny ifall den inte initierades. Du kan använda det så här: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Väljer den givna fliken och visar dess tillhörande ruta. Alla andra flikar som tidigare valts avmarkeras och dess tillhörande ruta döljs. Återgår till den som ringer innan flikrutan faktiskt har visats (dvs innan `shown.bs.tab`händelsen inträffar).

evenemang

När en ny flik visas aktiveras händelserna i följande ordning:

hide.bs.tab(på den aktuella aktiva fliken)
show.bs.tab(på fliken som ska visas)
hidden.bs.tab(på föregående aktiva flik, samma som för hide.bs.tabhändelsen)
shown.bs.tab(på den nyligen aktiva fliken som just visades, samma som för show.bs.tabevenemanget)

Om ingen flik redan var aktiv kommer händelserna hide.bs.taboch hidden.bs.tabinte att aktiveras.

Event typ	Beskrivning
`hide.bs.tab`	Den här händelsen aktiveras när en ny flik ska visas (och därmed den tidigare aktiva fliken ska döljas). Använd `event.target`och `event.relatedTarget`för att rikta in den aktuella aktiva fliken respektive den nya snart-aktiva fliken.
`hidden.bs.tab`	Den här händelsen aktiveras efter att en ny flik har visats (och den tidigare aktiva fliken döljs därför). Använd `event.target`och `event.relatedTarget`för att rikta in den tidigare aktiva fliken respektive den nya aktiva fliken.
`show.bs.tab`	Den här händelsen aktiveras vid flikvisning, men innan den nya fliken har visats. Använd `event.target`och `event.relatedTarget`för att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
`shown.bs.tab`	Den här händelsen aktiveras vid flikvisning efter att en flik har visats. Använd `event.target`och `event.relatedTarget`för att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})