跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme

導覽列組件

最後更新:

僅 CSS Tailwind CSS 導覽欄，包含品牌、導覽連結和操作槽。粘性和透明變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

導覽列元件顯示網站結構和使用者導覽的水平導覽清單。 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修飾符將導覽列放置在視窗的底部

導覽列

 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>

導覽列展示位置

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

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

水平放置

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

水平向左對齊（開始）

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>

水平對齊到中心

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>

水平向右對齊（末端）

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>

垂直放置

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

垂直對齊到頂部（開始）

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>

垂直對齊到中心

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>

垂直對齊到底部（末端）

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>

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 導覽列 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP