Hướng Dẫn Chi Tiết về Navbar trong Bootstrap: Tạo Thanh Điều Hướng Responsive

Navbar, hay thanh điều hướng, là một thành phần quan trọng trong thiết kế website hiện đại. Nó thường nằm ở đầu trang và đóng vai trò là trung tâm điều hướng, giúp người dùng dễ dàng truy cập các phần khác nhau của trang web. Bootstrap cung cấp một hệ thống mạnh mẽ để tạo ra các Navbar responsive, linh hoạt và dễ tùy chỉnh. Bài viết này sẽ đi sâu vào cách xây dựng và tùy biến Navbar trong Bootstrap.

I. Cấu trúc cơ bản của Navbar Bootstrap

Để tạo một Navbar cơ bản, bạn cần kết hợp các class sau:

  • .navbar: Class gốc để tạo một Navbar.
  • .navbar-expand{-sm|-md|-lg|-xl}: Xác định điểm breakpoint mà tại đó Navbar sẽ hiển thị đầy đủ (không bị thu gọn thành nút menu). Ví dụ, .navbar-expand-lg nghĩa là Navbar sẽ hiển thị đầy đủ trên các màn hình lớn (large) trở lên, còn trên các màn hình nhỏ hơn, nó sẽ thu gọn lại và hiển thị nút menu (toggler).
  • .navbar-dark hoặc .navbar-light: Chọn kiểu hiển thị sáng hoặc tối cho Navbar. Điều này ảnh hưởng đến màu chữ và các thành phần khác trên Navbar, giúp chúng dễ nhìn hơn trên nền sáng hoặc tối.
  • .bg-*: Sử dụng các class .bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-light, .bg-dark để thiết lập màu nền cho Navbar. Bạn cũng có thể sử dụng CSS tùy chỉnh để tạo màu nền riêng.

Vì Navbar sử dụng Flexbox, bạn nên làm quen với các thuộc tính của Flexbox trong Bootstrap để tùy chỉnh bố cục của Navbar một cách linh hoạt.

Ví dụ về cấu trúc HTML cơ bản của một Navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Sen Tây Hồ</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Trang chủ <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tính năng</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bảng giá</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Đã tắt</a>
      </li>
    </ul>
  </div>
</nav>

Đoạn code trên tạo ra một Navbar đơn giản với một thương hiệu (Sen Tây Hồ) và một số liên kết điều hướng. Khi màn hình nhỏ hơn breakpoint lg, Navbar sẽ thu gọn và hiển thị một nút menu.

II. Hiển thị Logo và Thương hiệu

Phần tử .navbar-brand được sử dụng để hiển thị thương hiệu hoặc logo của website trên Navbar. Bạn có thể sử dụng văn bản, hình ảnh hoặc kết hợp cả hai.

Ví dụ:

  • Brand Text:
<a class="navbar-brand" href="#">Sen Tây Hồ</a>
  • Brand Link:
<a class="navbar-brand" href="https://www.example.com">Sen Tây Hồ</a>
  • Brand Image:
<a class="navbar-brand" href="#">
  <img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="Logo Sen Tây Hồ">
</a>
  • Brand Link + Image:
<a class="navbar-brand" href="https://www.example.com">
  <img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="Logo Sen Tây Hồ">
  Sen Tây Hồ
</a>

Sử dụng alt="Logo Sen Tây Hồ" giúp mô tả hình ảnh cho các công cụ tìm kiếm và trình đọc màn hình, cải thiện khả năng tiếp cận và SEO.

III. Nút Toggler (Navbar Toggler)

Phần tử .navbar-toggler là nút được sử dụng để hiển thị hoặc ẩn nội dung của Navbar khi nó bị thu gọn trên các màn hình nhỏ. Nút này thường có biểu tượng ba gạch ngang (hamburger icon).

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Các thuộc tính data-toggle, data-target, aria-controls, aria-expanded và aria-label rất quan trọng để đảm bảo nút toggler hoạt động chính xác và dễ tiếp cận.

  • data-toggle="collapse": Chỉ định rằng nút này sẽ kích hoạt chức năng collapse.
  • data-target="#navbarNav": Liên kết nút này với phần tử có ID navbarNav, là phần nội dung sẽ được hiển thị hoặc ẩn.
  • aria-controls="navbarNav": Cung cấp thông tin cho các công cụ hỗ trợ về phần tử mà nút này điều khiển.
  • aria-expanded="false": Cho biết trạng thái ban đầu của phần tử được điều khiển (ẩn hoặc hiển thị).
  • aria-label="Toggle navigation": Cung cấp nhãn cho nút, giúp người dùng sử dụng trình đọc màn hình hiểu được chức năng của nó.

IV. Các Mục Điều Hướng (Nav Items)

Các mục điều hướng (liên kết) trên Navbar được đặt trong một danh sách không có thứ tự (<ul>) với class .navbar-nav. Mỗi mục điều hướng là một phần tử <li> với class .nav-item, và mỗi liên kết là một phần tử <a> với class .nav-link.

<ul class="navbar-nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Trang chủ <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Tính năng</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Bảng giá</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Đã tắt</a>
  </li>
</ul>
  • .active: Cho biết mục nào đang được chọn (trang hiện tại).
  • .disabled: Vô hiệu hóa một liên kết. Sử dụng tabindex="-1" và aria-disabled="true" để đảm bảo khả năng tiếp cận cho người dùng sử dụng bàn phím hoặc trình đọc màn hình.

V. Thêm Dropdown Menu

Bạn có thể thêm dropdown menu vào Navbar bằng cách sử dụng class .dropdown cho phần tử .nav-item và các class .dropdown-toggle, .dropdown-menu, .dropdown-item cho các phần tử bên trong.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Menu đổ xuống
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Mục 1</a>
    <a class="dropdown-item" href="#">Mục 2 abc</a>
    <a class="dropdown-item" href="#">Mục 3 zyz abc</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Một cái gì đó khác</a>
  </div>
</li>
  • data-toggle="dropdown": Kích hoạt chức năng dropdown.
  • aria-haspopup="true": Cho biết rằng liên kết này có một menu popup.
  • aria-expanded="false": Cho biết trạng thái ban đầu của menu dropdown (ẩn hoặc hiển thị).

VI. Vị trí Cố Định (Fixed Position)

Bạn có thể sử dụng các class .fixed-top hoặc .fixed-bottom để cố định Navbar ở đầu hoặc cuối trang.

<nav class="navbar fixed-top navbar-light bg-light">
  <!-- Nội dung Navbar -->
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <!-- Nội dung Navbar -->
</nav>

Khi sử dụng .fixed-top hoặc .fixed-bottom, hãy nhớ thêm padding vào phần <body> của trang để tránh nội dung bị che khuất bởi Navbar.

VII. Kết luận

Navbar là một thành phần thiết yếu của bất kỳ trang web nào, và Bootstrap cung cấp một cách dễ dàng và linh hoạt để tạo ra các Navbar responsive và tùy chỉnh. Bằng cách hiểu rõ cấu trúc và các class khác nhau của Navbar Bootstrap, bạn có thể tạo ra các thanh điều hướng đẹp mắt và hiệu quả cho trang web của mình. Việc tối ưu alt cho hình ảnh, sử dụng các thuộc tính aria-* và tuân thủ các nguyên tắc về khả năng tiếp cận (accessibility) sẽ giúp trang web của bạn thân thiện hơn với người dùng và các công cụ tìm kiếm.