---
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/zh-hant/components/navbar
---

# Navbar Component

導覽列元件顯示網站結構和使用者導覽的水平導覽清單。 Frutjam 導覽列系統採用語義 HTML 導覽和清單元素構建，支援多種佈局、響應式行為和嵌套選單整合。導航列可存取且可透過鍵盤導航，是主網站導航、麵包屑和選項卡介面的理想選擇。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級            | 類型  | 描述               |
| ------------- | --- | ---------------- |
| navbar        | 根據  | 水平導覽列容器          |
| navbar-list   | 修飾符 | 導航連結的水平列表        |
| navbar-start  | 修飾符 | 用於徽標或第一個導航組的左側插槽 |
| navbar-center | 修飾符 | 主導航的中心槽          |
| navbar-end    | 修飾符 | 用於操作和控制的右側插槽     |
| navbar-top    | 修飾符 | 將導覽列放置在視窗的頂部     |
| navbar-middle | 修飾符 | 在父項內垂直居中         |
| navbar-bottom | 修飾符 | 將導覽列放置在視窗的底部     |

## 導覽列

## 導覽列展示位置

導覽列元件預設位於開頭（LTR 中的左側）。使用 `navbar-start`、`navbar-center` 或 `navbar-end` 進行水平對齊，使用 `navbar-top`、`navbar-middle` 或 `navbar-bottom` 進行垂直對齊。放置是 RTL 友善的。

使用水平放置類別沿 X 軸對齊導覽列列表，並在導覽列具有自訂高度時使用垂直放置類別。

### 水平放置

控制 `navbar-list` 沿 X 軸的位置。這些是 RTL 友好的（開始/結束而不是左/右）。

#### 水平向左對齊（開始）

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

#### 水平對齊到中心

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

#### 水平向右對齊（末端）

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

### 垂直放置

控制沿 Y 軸的對齊方式。當導覽列具有自訂高度時，這特別有用。

#### 垂直對齊到頂部（開始）

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

#### 垂直對齊到中心

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

#### 垂直對齊到底部（末端）

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