---
title: "Navbar"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Navbar with sticky, responsive, and dropdown-ready layouts. Semantic HTML with mobile support for accessible, theme-aware site navigation."
url: https://frutjam.com/vi/components/navbar
---

# Navbar Component

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ả                                          |
| ------------- | --------------- | --------------------------------------------------- |
| navbar        | Căn cứ          | Vùng chứa thanh điều hướng ngang                    |
| navbar-list   | Công cụ sửa đổi | Danh sách ngang các liên kết điều hướng             |
| navbar-start  | Công cụ sửa đổi | Khe bên trái cho logo hoặc nhóm điều hướng đầu tiên |
| navbar-center | Công cụ sửa đổi | Khe trung tâm cho điều hướng chính                  |
| navbar-end    | Công cụ sửa đổi | Right slot for actions and controls                 |
| navbar-top    | Công cụ sửa đổi | Đặt thanh điều hướng ở đầu khung nhìn               |
| navbar-middle | Công cụ sửa đổi | Căn giữa theo chiều dọc trong cha mẹ                |
| navbar-bottom | Công cụ sửa đổi | Vị trí thanh điều hướng ở cuối khung nhìn           |

## Thanh điều hướng

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