Thẻ nav trong HTML: thanh điều hướng, menu và breadcrumb

Thanh điều hướng với nav

Bọc menu trong <nav> và đặt các liên kết trong một danh sách. Flexbox biến danh sách thành một thanh nằm ngang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none và padding: 0 bỏ dấu đầu dòng và phần thụt lề. display: block trên mỗi liên kết cho phép padding của nó chiếm chỗ thật trong thanh, nên cả khung có padding đều là vùng nhấp. Xóa dòng display: flex thì cùng menu đó trở thành danh sách dọc, giống một menu ở thanh bên.

Bản thân <nav> không có hình thức gì. Nhiệm vụ của nó là ngữ nghĩa: trình đọc màn hình hiển thị nó như một vùng điều hướng (navigation landmark), nên người dùng có thể nhảy tới menu, hoặc bỏ qua nó, chỉ bằng một phím.

Đánh dấu trang hiện tại

Thêm aria-current="page" vào liên kết của trang đang được hiển thị. Nó cho trình đọc màn hình biết "bạn đang ở đây", và cho CSS một điểm bám để tô sáng liên kết:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Chuyển aria-current="page" sang liên kết khác thì phần tô sáng đi theo. Định dạng dựa trên thuộc tính thay vì class .active giúp hình thức và khả năng tiếp cận luôn đồng bộ: không thể có cái này mà thiếu cái kia.

Nhiều nav trên một trang: nhãn và breadcrumb

Một trang có thể có menu chính, breadcrumb và mục lục, mỗi thứ trong một <nav> riêng. Gán cho mỗi cái một aria-label, để trình đọc màn hình đọc "Breadcrumb navigation" thay vì ba mục "navigation" giống hệt nhau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

Breadcrumb dùng danh sách có thứ tự <ol> vì thứ tự có ý nghĩa. Các dấu gạch chéo đến từ CSS ::before, nên trình đọc màn hình không đọc "slash" giữa từng mục. Mục cuối cùng là trang hiện tại và không phải là liên kết.

Mục lục

Một danh sách liên kết tới các phần của cùng một trang cũng là điều hướng. Các liên kết #id nhảy tới phần tử có id đó; hãy thử chúng trong bản xem trước:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

Ở đây nhãn đến từ một tiêu đề hiển thị qua aria-labelledby, cách này tốt hơn aria-label khi tiêu đề đã có sẵn trên màn hình.

Nút bật tắt menu cho di động

Trên màn hình hẹp, menu thường được giấu sau một nút. Hãy dùng một <button> thật với aria-expanded, và giữ các liên kết bên trong <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded cho trình đọc màn hình biết menu đang mở hay đóng, và thuộc tính hidden loại danh sách khỏi cả màn hình lẫn cây khả năng tiếp cận (accessibility tree) khi menu đóng. Trên màn hình rộng, bạn sẽ hiện danh sách bằng media query và ẩn nút đi.

Lỗi thường gặp

• Bọc mọi nhóm liên kết trong <nav>. Chỉ dùng nó cho menu chính, breadcrumb, phân trang và mục lục. Các liên kết nằm trong đoạn văn không phải là khối điều hướng.
• Nút menu làm từ <div>. Nó không nhận focus và không bấm được bằng bàn phím. Hãy dùng <button>.
• Nhiều nav mà không có nhãn. Thêm aria-label hoặc aria-labelledby cho từng cái để phân biệt được chúng.
• Chỉ tô màu liên kết hiện tại. Thêm aria-current="page"; màu sắc thôi thì không được đọc lên và có thể không phải ai cũng nhìn thấy.
• Liên kết href="#" trên bản chính thức. Trong bản demo thì ổn, nhưng mục menu thật cần URL thật để còn hoạt động khi mở trong tab mới. Trang liên kết giải thích cách các giá trị href hoạt động.