Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Navbar Component

CSS-only Tailwind CSS navbar with brand, nav links, and action slots. Sticky and transparent variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Các thành phần thanh điều hướng hiển thị danh sách điều hướng ngang cho cấu trúc trang web và điều hướng người dùng. Được xây dựng bằng các phần tử danh sách và điều hướng HTML ngữ nghĩa, hệ thống thanh điều hướng Frutjam hỗ trợ nhiều bố cục, hành vi phản hồi và tích hợp menu lồng nhau. Các thanh điều hướng có thể truy cập và điều hướng bằng bàn phím là lý tưởng cho việc điều hướng trang web chính, đường dẫn và giao diện tab.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
navbarCăn cứVùng chứa thanh điều hướng ngang
navbar-listCông cụ sửa đổiDanh sách ngang các liên kết điều hướng
navbar-startCông cụ sửa đổiKhe bên trái cho logo hoặc nhóm điều hướng đầu tiên
navbar-centerCông cụ sửa đổiKhe trung tâm cho điều hướng chính
navbar-endCông cụ sửa đổiRight slot for actions and controls
navbar-topCông cụ sửa đổiĐặt thanh điều hướng ở đầu khung nhìn
navbar-middleCông cụ sửa đổiCăn giữa theo chiều dọc trong cha mẹ
navbar-bottomCông cụ sửa đổiVị trí thanh điều hướng ở cuối khung nhìn

Thanh điều hướng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav className="navbar">
  <ul className="navbar-list gap-x-6">
    <li>
      <a className="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Vị trí thanh điều hướng

Thành phần thanh điều hướng theo mặc định được đặt ở vị trí bắt đầu (bên trái trong LTR). Sử dụng navbar-start, navbar-center hoặc navbar-end để căn chỉnh theo chiều ngang và navbar-top, navbar-middle hoặc navbar-bottom để căn chỉnh theo chiều dọc. Vị trí thân thiện với RTL.

Sử dụng các lớp vị trí theo chiều ngang để căn chỉnh danh sách thanh điều hướng dọc theo trục X và các lớp vị trí theo chiều dọc khi thanh điều hướng có chiều cao tùy chỉnh.

Vị trí ngang

Kiểm soát cách danh sách thanh điều hướng nằm dọc theo trục X. Đây là những tính năng thân thiện với RTL (Bắt đầu/Kết thúc thay vì Trái/Phải).

Căn ngang sang trái (bắt đầu)

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-start">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Căn chỉnh theo chiều ngang vào trung tâm

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-center">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Căn ngang về bên phải (cuối)

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-end">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Vị trí dọc

Kiểm soát căn chỉnh dọc theo trục Y. Điều này đặc biệt hữu ích khi thanh điều hướng có chiều cao tùy chỉnh.

Căn dọc lên trên cùng (bắt đầu)

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-top h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Căn chỉnh theo chiều dọc vào trung tâm

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-middle h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Căn dọc về phía dưới (cuối)

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<nav class="navbar navbar-bottom h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>