跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

面包屑组件

最后更新:

纯 CSS Tailwind CSS 面包屑导航，具有自定义分隔符和可访问的地标标记。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。

面包屑组件显示导航层次结构并帮助用户了解他们在网站中的位置。面包屑采用语义 HTML 导航元素和 ARIA 地标构建，可实现可访问性，允许用户快速导航到父部分，从而提高可用性。 Frutjam 面包屑系统自动呈现分隔符并支持自定义分隔符以实现灵活的样式。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
breadcrumb根据面包屑路径的导航容器
breadcrumb-list修饰符面包屑项目的有序列表
breadcrumb-item修饰符面包屑中的单个列表项
breadcrumb-link修饰符锚点元素样式为面包屑链接
breadcrumb-separator修饰符项目之间的分隔符元素
breadcrumb-current修饰符标记当前（活动）页面项目

基本用法

如果未提供分隔符，则面包屑项目之间会自动显示一个箭头。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

面包屑分离器

带有文本分隔符的面包屑导航

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>

带图标分隔符的面包屑导航

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>

面包屑导航辅助功能

为了确保屏幕阅读器可以访问面包屑：

  • 使用 aria-label="Breadcrumb" 将结构包装在 <nav> 元素中。
  • 最后一项（当前页面）应使用 aria-current="page" 并且最好是 <span> 而不是链接。
  • 屏幕阅读器应忽略分隔符（如果使用物理元素，通常通过 CSS 或 aria-hidden="true" 处理）。

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 面包屑 类名称和结构。不再有幻觉课程。

尝试Cherry MCP