Navs ɛn tab dɛn

Dokumɛnt ɛn ɛgzampul dɛn fɔ aw fɔ yuz Bootstrap in inklud nevigishɔn kɔmpɔnɛnt dɛn.

Na dis pej

Base nav

Navigishɔn we de na Bootstrap sheb jenɛral mak ɛn stayl dɛn, frɔm di bays .navklas to di aktif ɛn disabled stet dɛn. Swap modifya klas fɔ swich bitwin ɛni stayl.

Di bays .navkɔmpɔnɛnt dɛn bil wit fleksbɔks ɛn i de gi wan strɔng fawndeshɔn fɔ bil ɔl kayn nevigishɔn kɔmpɔnɛnt dɛn. I inklud sɔm stayl ɔvarayd dɛn (fɔ wok wit list dɛn), sɔm link pad fɔ big hit eria dɛn, ɛn besik disabled stayl.

Di bays .navkɔmpɔnɛnt nɔ de inklud ɛni .activestet. Di ɛgzampul dɛn we de kam biɛn ya gɛt di klas, mɔ fɔ sho se dis patikyula klas nɔ de trig ɛni spɛshal stayl.

Fɔ gi di aktif stet to ɛp tɛnkɔlɔji dɛn, yuz di aria-currentatribyut — yuz di pagevalyu fɔ di pej we de naw, ɔ truefɔ di tin we de naw na wan sɛt.

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>

Klas dɛn de yuz ɔlsay, so yu mak kin bi supa fleksibul. Yuz <ul>s lɛk ɔp, <ol>if di ɔda we aw yu tin dɛn de impɔtant, ɔ rol yu yon wit wan <nav>ɛlimɛnt. Bikɔs di .navyuz display: flexdɛn , di nav link dɛn de biev di sem we aw di nav tin dɛn go biev, bɔt we nɔ gɛt di ɛkstra mak.

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>

Stayl dɛn we de

Chenj di stayl fɔ .navs kɔmpɔnɛnt wit modifya ɛn yutiliti. Miks ɛn mach as nid de, ɔ bil yu yon.

Ɔrizɔntal alaynɛshɔn

Chenj di ɔrizɔntal alaynɛshɔn fɔ yu nav wit flexbox yutiliti dɛn . Bay difɔlt, nav dɛn de alaynɛd na di lɛft, bɔt yu kin chenj dɛn izi wan to sɛnt ɔ rayt alaynɛd.

Sɛntral wit .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>

Rayt-alayn wit .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>

Ɔp ɛn dɔŋ

Stak yu nevigishɔn bay we yu chenj di fleks aytem dairekshɔn wit di .flex-columnyutiliti. Nid fɔ stak dɛn na sɔm viewport dɛn bɔt nɔto ɔda wan dɛn? Yuz di vɛshɔn dɛn we de ansa (ɛgz., .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>

As ɔltɛm, vertikal nevigishɔn pɔsibul witout <ul>s, tu.

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>

Tab dɛn

Tek di besik nav frɔm ɔp ɛn ad di .nav-tabsklas fɔ jenarayz wan tab intafays. Yuz dɛn fɔ mek tab rijyɔn dɛn wit wi tab JavaSkript plɔgin .

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>

Pils dɛn we dɛn kin gi

Tek da sem HTML de, bɔt yuz .nav-pillsinsted:

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>

Fil ɛn jɔstify

Fos yu .nav's kɔntinyu fɔ ɛkstɛnd di ful avaylabl wit wan pan tu modifya klas dɛn. Fɔ ful-ɔp ɔl di ples we de wit yu .nav-items di rayt we, yuz .nav-fill. Notis se ɔl di ɔrizɔntal spɛs de ɔkup, bɔt nɔto ɔl nav aytem gɛt di sem wit.

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>

We yu de yuz <nav>-based nevigishɔn, yu kin sef wan ɔmit .nav-itemas .nav-linkna fɔ stayl <a>ɛlimɛnt dɛn nɔmɔ nid.

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ɔ ikwal-wid ɛlimɛnt dɛn, yuz .nav-justified. Ɔl di ɔrizɔntal spɛs go gɛt nav link dɛn, bɔt nɔ lɛk di wan dɛn we de .nav-fillɔp, ɛvri nav aytem go gɛt di sem wit.

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>

Semweso lɛk di .nav-fillɛgzampul we de yuz wan <nav>-based nevigishɔn.

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>

Wok wit fleks yutiliti

If yu nid responsive nav variations, tink bɔt fɔ yuz wan siriɔs flexbox utilities . Wail mɔ verbose, dɛn yutiliti ya de gi big kɔstɔmayshɔn akɔdin to rispɔnsiv brekpɔynt dɛn. Insay di ɛgzampul we de dɔŋ ya, wi nav go stak na di brek pɔynt we smɔl pas ɔl, dɔn adap to wan ɔrizɔntal layout we de ful di wit we de stat frɔm di smɔl brek pɔynt.

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>

Fɔ tɔk bɔt aw fɔ ebul fɔ go de

If yu de yuz navs fɔ gi wan nevigishɔn bar, mek shɔ se yu ad a role="navigation"to di mɔs lɔjik mama ɛn papa kɔntena fɔ di <ul>, ɔ rap wan <nav>ɛlimɛnt rawnd di wan ol nevigishɔn. Nɔ ad di wok to di <ul>sɛf, bikɔs dis go mek dɛn nɔ anɔys am as rial list bay ɛp tɛknɔlɔji dɛn.

Notis se nevigishɔn bar dɛn, ivin if dɛn stayl dɛn we dɛn de si as tab dɛn wit di .nav-tabsklas, dɛn nɔ fɔ gi dɛn role="tablist", role="tab"ɔ role="tabpanel"atribyut dɛn. Dis na onli aprכpriet fכ dinamik tab intafeys, lεk aw dεn dεskrεb am na di ARIA Authoring Practices Guide tab patεn . Si JavaSkript bihayvya fɔ dinamik tab intafeys dɛn na dis sɛkshɔn fɔ ɛgzampul. Di aria-currentatribyut nɔ nid pan dinamik tab intafeys dɛn bikɔs wi JavaSkript de handle di stet we yu dɔn pik bay we i ad aria-selected="true"pan di aktiv tab.

Yuz di drɔpdɔwn dɛn

Ad drɔpdɔwn mɛnyu dɛn wit smɔl ɛkstra HTML ɛn di drɔpdɔwn dɛn JavaSkript plɔgin .

Tab dɛn we gɛt drɔp-dɔwn dɛn

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>

Pils wit 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 we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, navs naw de yuz lokal CSS vɛriɔbul dɛn pan .nav, .nav-tabs, ɛn .nav-pillsfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

Na di .navbays klas:

  --#{$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};

Na di .nav-tabsmodifya klas:

  --#{$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};

Na di .nav-pillsmodifya klas:

  --#{$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 di vayriɔbul dɛn

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

JavaSkript bihayvya

Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.jsfayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi nevigishɔn tab ɛn pils dɛn fɔ mek tab pan dɛn fɔ lokal tin dɛn.

Dis na sɔm pleshɔlda kɔntinyu di Ɔm tab in kɔntinyu we gɛt fɔ du wit am. We yu klik ɔda tab, i go chenj di we aw dis wan de si fɔ di nɛks wan. Di tab JavaSkript de chenj klas dɛn fɔ kɔntrol di kɔntinyu fɔ si ɛn di stayl. Yu kin yuz am wit tab, pils, ɛn ɛni ɔda .nav-pawa nevigishɔn.

Dis na sɔm pleshɔlda kɔntinyu di Profayl tab in kɔntinyu we gɛt fɔ du wit am. We yu klik ɔda tab, i go chenj di we aw dis wan de si fɔ di nɛks wan. Di tab JavaSkript de chenj klas dɛn fɔ kɔntrol di kɔntinyu fɔ si ɛn di stayl. Yu kin yuz am wit tab, pils, ɛn ɛni ɔda .nav-pawa nevigishɔn.

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ɔ ɛp fɔ fit yu nid, dis de wok wit <ul>-based mak, lɛk aw dɛn sho ɔp, ɔ wit ɛni arbitrary “roll your own” mak. Notis se if yu de yuz <nav>, yu nɔ fɔ ad role="tablist"dairekt to am, bikɔs dis go ɔvalayz di ɛlimɛnt in nativ wok as nevigishɔn landmak. Bifo dat, chenj to ɔda ɛlimɛnt (insay di ɛgzampul we de dɔŋ ya, wan simpul <div>) ɛn rap di wan dɛn we de <nav>rawnd am.

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

Di tabs plɔgin de wok bak wit pils.

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>

Ɛn wit vertikal pils dɛn. I fayn fɔ mek yu gɛt vertikal tab dɛn, yu fɔ ad bak aria-orientation="vertical"to di tab list kɔntena.

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>

Di we aw pɔsin kin ebul fɔ go de

Daynamik tab intafeys, as dɛn diskrayb am na di ARIA Ɔtorishɔn Praktis Gɛd tab patɛn , nid role="tablist", role="tab", role="tabpanel", ɛn ɔda aria-atribyut dɛn fɔ mek dɛn ebul fɔ gi dɛn strɔkchɔ, wok, ɛn di stet we dɛn de naw to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp (lɛk skrin rida dɛn). As di bɛst we fɔ du tin, wi kin advays yu fɔ yuz <button>ɛlimɛnt dɛn fɔ di tab dɛn, bikɔs dɛn tin ya na kɔntrol dɛn we de mek chenj chenj, pas fɔ yuz link dɛn we de go na nyu pej ɔ say.

In layn wit di ARIA Authoring Practices patɛn, na di tab nɔmɔ we de wok naw de gɛt kibɔd fɔs. We dɛn bigin fɔ yuz di JavaSkript plɔgin, i go sɛt tabindex="-1"pan ɔl di tab kɔntrol dɛn we nɔ de wok. Wans di tab we de wok naw gɛt fɔs, di kɔsa ki dɛn go aktiv di tab we bin de bifo/nɛks, wit di plɔgin we de chenj di rovingtabindex akɔdin to dat. Bɔt notis se di JavaSkript plɔgin nɔ de sho difrɛns bitwin ɔrizɔntal ɛn vertikal tab list dɛn we i kam pan kɔsa ki intarakshɔn dɛn: ilɛksɛf di tab list de, di ɔp ɛn lɛft kɔsa ɔl tu go na di tab we bin de bifo, ɛn dɔŋ ɛn rayt kɔsa go to di nɛks tab.

In jɔnal, fɔ mek i izi fɔ mek yu ebul fɔ go na di kibɔd, i fayn fɔ mek di tab panɛl dɛnsɛf ebul fɔ pe atɛnshɔn bak, pas nɔmɔ di fɔs ɛlimɛnt we gɛt tin dɛn we gɛt minin insay di tab panɛl dɔn ɔlrɛdi ebul fɔ pe atɛnshɔn. Di JavaSkript plɔgin nɔ de tray fɔ handle dis aspek—we i fayn, yu go nid fɔ mek yu tab panɛl dɛn klia wan bay we yu ad tabindex="0"pan yu mak.

Di tab JavaSkript plɔgin nɔ de sɔpɔt tab intafays dɛn we gɛt drɔpdɔwn mɛnyu dɛn, bikɔs dɛn tin ya kin mek dɛn gɛt prɔblɛm dɛn fɔ yuz ɛn fɔ mek dɛn ebul fɔ yuz am. Frɔm wan yusabiliti pɔynt, di tru tin se di tab we de sho naw in trig ɛlimɛnt nɔ de si wantɛm wantɛm (as i de insay di drɔpdɔwn mɛnyu we dɛn lɔk) kin mek pipul dɛn kɔnfyus. Frɔm wan aksesibiliti pɔynt fɔ si, naw, nɔ sɛnsful we nɔ de fɔ map dis kayn kɔnstrɔkshɔn to wan standad WAI ARIA patɛn, we min se dɛn nɔ go ebul fɔ mek am izi fɔ mek pipul dɛn we de yuz ɛp tɛknɔlɔji dɛn ɔndastand am izi wan.

Yuz data atribyut dɛn

Yu kin aktiv wan tab ɔ pil nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-bs-toggle="tab"ɔ data-bs-toggle="pill"pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .nav-tabsɔ .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>

Yu kin yuz JavaSkript fɔ yuz am

Enable tabable tabs via JavaScript (ɛni tab nid fɔ aktiv wan wan):

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

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

Yu kin aktiv wan wan tab dɛn difrɛn we dɛn:

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

Fade effekt we yu de du

Fɔ mek di tab dɛn go fayn, ad .fadeto ɛni wan pan dɛn .tab-pane. Di fɔs tab pan fɔ gɛt bak .showfɔ mek di fɔs tin dɛn we de insay de sho.

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

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

Aktiv yu kɔntinyu as tab ɛlimɛnt.

Yu kin mek wan tab instans wit di kɔnstrɔkta, fɔ ɛgzampul:

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

We	Tɔk bɔt
`dispose`	Destroy wan element in tab.
`getInstance`	Statik we de alaw yu fɔ gɛt di tab instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statik mɛtɔd we de ritɔn wan tab instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am. Yu kin yuz am lɛk dis: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Pik di tab we dɛn gi ɛn sho di say we gɛt fɔ du wit am. Ɛni ɔda tab we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (dat na bifo di `shown.bs.tab`tin apin).

Di tin dɛn we kin apin

We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:

hide.bs.tab(na di tab we de wok naw)
show.bs.tab(na di tab we dɛn go sho)
hidden.bs.tab(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tabivin)
shown.bs.tab(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tabivin)

If no tab nɔ bin dɔn ɔlrɛdi aktif, den di hide.bs.tabɛn hidden.bs.tabivin dɛn nɔ go faya.

Di kayn tin we apin	Tɔk bɔt
`hide.bs.tab`	Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz `event.target`ɛn `event.relatedTarget`fɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan.
`hidden.bs.tab`	Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz `event.target`ɛn `event.relatedTarget`fɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan.
`show.bs.tab`	Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz `event.target`ɛn `event.relatedTarget`fɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
`shown.bs.tab`	Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz `event.target`ɛn `event.relatedTarget`fɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.

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