1. Giới thiệu

Bootstrap 5 cung cấp các thành phần Navs và Tabs để giúp xây dựng các thanh điều hướng linh hoạt trong ứng dụng web. Những thành phần này hỗ trợ hiển thị nhiều kiểu tab khác nhau như ngang, dọc và có thể kết hợp với JavaScript để tạo hiệu ứng chuyển đổi nội dung mượt mà.

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Navs và Tabs trong Bootstrap 5 cùng với các tùy chỉnh nâng cao.

2. Cách sử dụng navs cơ bản

2.1 Navs dạng danh sách

Để tạo một thanh điều hướng cơ bản, sử dụng lớp .nav và .nav-item như sau:

html
Thử online
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Trang chủ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Giới thiệu</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Dịch vụ</a>
  </li>
</ul>
  • .nav giúp định dạng danh sách liên kết.
  • .nav-item đại diện cho từng mục trong danh sách.
  • .nav-link là lớp dành cho các liên kết.
  • .active đánh dấu mục đang được chọn.

2.2 Navs căn giữa hoặc căn phải

Bootstrap hỗ trợ căn giữa hoặc căn phải bằng cách thêm các lớp Flexbox:

html
Thử online
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Trang chủ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Giới thiệu</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Dịch vụ</a>
  </li>
</ul>
  • .justify-content-center để căn giữa.
  • .justify-content-end để căn phải.

3. Tabs trong Bootstrap 5

3.1 Tabs cơ bản

Để tạo Tabs có hiệu ứng chuyển đổi nội dung, sử dụng .nav-tabs và .tab-content:

html
Thử online
<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">Trang chủ</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">Hồ sơ</button>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">
    Nội dung Trang chủ
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel">
    Nội dung Hồ sơ
  </div>
</div>

Giải thích:

  • .nav-tabs giúp tạo giao diện Tabs.
  • .nav-link kết hợp với data-bs-toggle="tab" để kích hoạt tab.
  • .tab-content chứa nội dung của các tab.
  • .tab-pane đại diện cho từng tab.
  • .active và .show để hiển thị tab mặc định.

3.2 Tabs dọc

Thêm lớp .flex-column vào .nav để hiển thị tab theo chiều dọc:

html
Thử online
<div class="d-flex">
  <ul class="nav nav-tabs flex-column me-3" id="v-tabs" role="tablist">
    <li class="nav-item">
      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">Tab 1</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">Tab 2</button>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="tab1">Nội dung Tab 1</div>
    <div class="tab-pane fade" id="tab2">Nội dung Tab 2</div>
  </div>
</div>

4. Pills navigation (menu dạng nút)

Thay vì dùng .nav-tabs, bạn có thể sử dụng .nav-pills để tạo menu dạng nút:

html
Thử online
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Trang chủ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Dịch vụ</a>
  </li>
</ul>
  • .nav-pills tạo hiệu ứng menu dạng nút bo tròn.
  • .active đánh dấu tab đang được chọn.

5. Tabs kết hợp với JavaScript

Nếu bạn muốn kích hoạt tab bằng JavaScript, sử dụng phương thức new bootstrap.Tab(element):

html
<script>
  var firstTab = new bootstrap.Tab(document.querySelector('#home-tab'));
  firstTab.show();
</script>

Hoặc kích hoạt tab khi người dùng nhấp vào nút:

html
<button onclick="showProfileTab()">Mở Hồ sơ</button>
<script>
  function showProfileTab() {
    var profileTab = new bootstrap.Tab(document.querySelector('#profile-tab'));
    profileTab.show();
  }
</script>

6. Kết luận

Bootstrap 5 cung cấp nhiều tùy chọn linh hoạt để tạo Navs và Tabs giúp điều hướng trong trang web trở nên chuyên nghiệp hơn. Bạn có thể sử dụng các lớp CSS có sẵn hoặc kết hợp với JavaScript để tạo hiệu ứng động.

Nếu bạn có thắc mắc hoặc muốn góp ý, hãy để lại bình luận dưới bài viết nhé! 🚀