跳转到主内容
Frutjam logo Frutjam
v2.2.2
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修饰符Right slot for actions and controls
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>