Nav dan tab

Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan pada Bootstrap.

Di halaman ini

navigasi dasar

Navigasi yang tersedia di Bootstrap berbagi markup dan gaya umum, dari .navkelas dasar hingga status aktif dan nonaktif. Tukar kelas pengubah untuk beralih di antara setiap gaya.

Komponen dasar .navdibangun dengan flexbox dan memberikan fondasi yang kuat untuk membangun semua jenis komponen navigasi. Ini mencakup beberapa penggantian gaya (untuk bekerja dengan daftar), beberapa bantalan tautan untuk area hit yang lebih besar, dan gaya dasar yang dinonaktifkan.

Komponen dasar .navtidak menyertakan .activestatus apa pun. Contoh berikut menyertakan kelas, terutama untuk menunjukkan bahwa kelas khusus ini tidak memicu gaya khusus apa pun.

Untuk menyampaikan status aktif ke teknologi bantu, gunakan aria-currentatribut — menggunakan pagenilai untuk halaman saat ini, atau trueuntuk item saat ini dalam satu set.

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>

Kelas digunakan di seluruh, sehingga markup Anda bisa sangat fleksibel. Gunakan <ul>s seperti di atas, <ol>jika urutan item Anda penting, atau gulung sendiri dengan <nav>elemen. Karena .navkegunaan display: flex, tautan nav berperilaku sama seperti item nav, tetapi tanpa markup tambahan.

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>

Gaya yang tersedia

Ubah gaya .navkomponen s dengan pengubah dan utilitas. Campur dan cocokkan sesuai kebutuhan, atau buat sendiri.

Perataan horizontal

Ubah perataan horizontal nav Anda dengan utilitas flexbox . Secara default, navigasi rata kiri, tetapi Anda dapat dengan mudah mengubahnya menjadi rata tengah atau kanan.

Dipusatkan dengan .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>

Rata kanan dengan .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

Tumpuk navigasi Anda dengan mengubah arah item fleksibel dengan .flex-columnutilitas. Perlu menumpuknya di beberapa viewport tetapi tidak di yang lain? Gunakan versi responsif (mis., .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>

Seperti biasa, navigasi vertikal juga dimungkinkan tanpa <ul>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>

tab

Mengambil navigasi dasar dari atas dan menambahkan .nav-tabskelas untuk menghasilkan antarmuka tab. Gunakan mereka untuk membuat wilayah tab dengan plugin JavaScript tab kami .

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>

pil

Ambil HTML yang sama, tetapi gunakan .nav-pillssebagai gantinya:

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>

Isi dan beri alasan

Paksa .navkonten Anda untuk memperluas lebar penuh yang tersedia salah satu dari dua kelas pengubah. Untuk mengisi semua ruang yang tersedia secara proporsional dengan .nav-items Anda, gunakan .nav-fill. Perhatikan bahwa semua ruang horizontal ditempati, tetapi tidak setiap item navigasi memiliki lebar yang sama.

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>

Saat menggunakan <nav>navigasi berbasis, Anda dapat dengan aman menghilangkannya .nav-itemkarena hanya .nav-linkdiperlukan untuk <a>elemen gaya.

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>

Untuk elemen dengan lebar yang sama, gunakan .nav-justified. Semua ruang horizontal akan ditempati oleh tautan nav, tetapi tidak seperti di .nav-fillatas, setiap item nav akan memiliki lebar yang sama.

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>

Mirip dengan .nav-fillcontoh menggunakan <nav>navigasi berbasis.

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>

Bekerja dengan utilitas fleksibel

Jika Anda memerlukan variasi navigasi responsif, pertimbangkan untuk menggunakan serangkaian utilitas flexbox . Meskipun lebih bertele-tele, utilitas ini menawarkan penyesuaian yang lebih besar di seluruh breakpoint responsif. Pada contoh di bawah ini, nav kita akan ditumpuk pada breakpoint terendah, kemudian beradaptasi dengan layout horizontal yang mengisi lebar yang tersedia mulai dari breakpoint kecil.

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>

Mengenai aksesibilitas

Jika Anda menggunakan navs untuk menyediakan bilah navigasi, pastikan untuk menambahkan a role="navigation"ke wadah induk paling logis dari <ul>, atau bungkus <nav>elemen di seluruh navigasi. Jangan menambahkan peran <ul>itu sendiri, karena ini akan mencegahnya diumumkan sebagai daftar aktual oleh teknologi bantu.

Perhatikan bahwa bilah navigasi, meskipun secara visual ditata sebagai tab dengan .nav-tabskelas, tidak boleh diberikan role="tablist", role="tab"atau role="tabpanel"atribut. Ini hanya sesuai untuk antarmuka tab dinamis, seperti yang dijelaskan dalam pola tab Panduan Praktik Penulisan ARIA . Lihat perilaku JavaScript untuk antarmuka tab dinamis di bagian ini sebagai contoh. Atribut aria-currenttidak diperlukan pada antarmuka tab dinamis karena JavaScript kami menangani status yang dipilih dengan menambahkan aria-selected="true"pada tab aktif.

Menggunakan dropdown

Tambahkan menu dropdown dengan sedikit tambahan HTML dan plugin JavaScript dropdown .

Tab dengan dropdown

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>

Pil dengan dropdown

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

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, navs sekarang menggunakan variabel CSS lokal pada .nav, .nav-tabs, dan .nav-pillsuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

Di .navkelas dasar:

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

Di .nav-tabskelas pengubah:

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

Di .nav-pillskelas pengubah:

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

Variabel Sass

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

Perilaku JavaScript

Gunakan plugin tab JavaScript—termasuk satu per satu atau melalui file yang dikompilasi bootstrap.js—untuk memperluas tab dan pil navigasi kami untuk membuat panel konten lokal yang dapat ditabulasi.

Ini adalah beberapa konten tempat penampung konten terkait tab Beranda . Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .navnavigasi bertenaga lainnya.

Ini adalah beberapa konten placeholder konten terkait tab Profil . Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .navnavigasi bertenaga lainnya.

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>

Untuk membantu memenuhi kebutuhan Anda, ini berfungsi dengan <ul>markup berbasis, seperti yang ditunjukkan di atas, atau dengan markup "roll your own" yang sewenang-wenang. Perhatikan bahwa jika Anda menggunakan <nav>, Anda tidak boleh menambahkannya role="tablist"secara langsung, karena ini akan menggantikan peran asli elemen sebagai tengara navigasi. Alih-alih, alihkan ke elemen alternatif (dalam contoh di bawah, sederhana <div>) dan bungkus di <nav>sekitarnya.

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>

Plugin tab juga berfungsi dengan pil.

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>

Dan dengan pil vertikal. Idealnya, untuk tab vertikal, Anda juga harus menambahkan aria-orientation="vertical"ke wadah daftar tab.

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>

Aksesibilitas

Antarmuka tab dinamis, seperti yang dijelaskan dalam pola tab ARIA Authoring Practices Guide , memerlukan role="tablist", role="tab", role="tabpanel", dan aria-atribut tambahan untuk menyampaikan struktur, fungsionalitas, dan statusnya saat ini kepada pengguna teknologi bantu (seperti pembaca layar). Sebagai praktik terbaik, sebaiknya gunakan <button>elemen untuk tab, karena ini adalah kontrol yang memicu perubahan dinamis, bukan tautan yang menavigasi ke laman atau lokasi baru.

Sejalan dengan pola ARIA Authoring Practices, hanya tab yang sedang aktif yang menerima fokus keyboard. Ketika plugin JavaScript diinisialisasi, itu akan diatur tabindex="-1"pada semua kontrol tab yang tidak aktif. Setelah tab yang sedang aktif memiliki fokus, tombol kursor mengaktifkan tab sebelumnya/berikutnya, dengan plugin mengubah rovingtabindex yang sesuai. Namun, perhatikan bahwa plugin JavaScript tidak membedakan antara daftar tab horizontal dan vertikal dalam hal interaksi tombol kursor: terlepas dari orientasi daftar tab, kursor atas dan kiri mengarah ke tab sebelumnya, dan kursor bawah dan kanan menuju ke tab berikutnya.

Secara umum, untuk memfasilitasi navigasi keyboard, disarankan untuk membuat panel tab itu sendiri juga dapat difokuskan, kecuali jika elemen pertama yang berisi konten bermakna di dalam panel tab sudah dapat difokuskan. Plugin JavaScript tidak mencoba menangani aspek ini—jika sesuai, Anda harus secara eksplisit membuat panel tab Anda dapat difokuskan dengan menambahkan tabindex="0"markup Anda.

Plugin tab JavaScript tidak mendukung antarmuka tab yang berisi menu tarik-turun, karena ini menyebabkan masalah kegunaan dan aksesibilitas. Dari perspektif kegunaan, fakta bahwa elemen pemicu tab yang saat ini ditampilkan tidak langsung terlihat (karena berada di dalam menu tarik-turun yang tertutup) dapat menyebabkan kebingungan. Dari sudut pandang aksesibilitas, saat ini tidak ada cara yang masuk akal untuk memetakan konstruksi semacam ini ke pola WAI ARIA standar, yang berarti bahwa hal itu tidak dapat dengan mudah dipahami oleh pengguna teknologi bantu.

Menggunakan atribut data

Anda dapat mengaktifkan navigasi tab atau pil tanpa menulis JavaScript apa pun hanya dengan menentukan data-bs-toggle="tab"atau data-bs-toggle="pill"pada suatu elemen. Gunakan atribut data ini pada .nav-tabsatau .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>

Melalui JavaScript

Aktifkan tab yang dapat ditabulasi melalui JavaScript (setiap tab harus diaktifkan satu per satu):

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

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

Anda dapat mengaktifkan tab individual dengan beberapa cara:

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

efek memudar

Untuk membuat tab memudar, tambahkan .fadeke masing-masing .tab-pane. Panel tab pertama juga harus .showmembuat konten awal terlihat.

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

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

Mengaktifkan konten Anda sebagai elemen tab.

Anda dapat membuat instance tab dengan konstruktor, misalnya:

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

metode	Keterangan
`dispose`	Menghancurkan tab elemen.
`getInstance`	Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metode statis yang mengembalikan instance tab yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Memilih tab yang diberikan dan menampilkan panel yang terkait. Tab lain yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (yaitu sebelum `shown.bs.tab`peristiwa terjadi).

Acara

Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:

hide.bs.tab(pada tab aktif saat ini)
show.bs.tab(pada tab yang akan ditampilkan)
hidden.bs.tab(pada tab aktif sebelumnya, sama dengan tab hide.bs.tabacara)
shown.bs.tab(pada tab yang baru saja ditampilkan yang baru aktif, yang sama dengan untuk show.bs.tabacara tersebut)

Jika tidak ada tab yang sudah aktif, maka peristiwa hide.bs.taband hidden.bs.tabtidak akan diaktifkan.

Jenis acara	Keterangan
`hide.bs.tab`	Acara ini diaktifkan ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan masing-masing tab aktif saat ini dan tab baru yang akan segera aktif.
`hidden.bs.tab`	Acara ini diaktifkan setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan tab aktif sebelumnya dan tab aktif baru, masing-masing.
`show.bs.tab`	Acara ini diaktifkan pada tampilan tab, tetapi sebelum tab baru ditampilkan. Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
`shown.bs.tab`	Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).

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