For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/components/breadcrumb.md.
A3S UI
  • 简体中文
  • v0.4.1

      • 面包屑

      面包屑说明当前页面在稳定信息层级中的位置，并让用户直接返回祖先页面；它不记录浏览历史，也不替代主导航。

      实时预览

      用法

      引入 CSS

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/breadcrumb.css";
@import "@a3s-lab/ui/styles/a3s.css";

      添加层级路径

      使用具名导航地标和有序列表。祖先是链接，当前页面是带 aria-current="page" 的普通文本，分隔符不进入可访问性树。

      <nav class="breadcrumb" aria-label="面包屑">
  <ol>
    <li><a href="/docs">文档</a></li>
    <li aria-hidden="true">
      <svg data-rtl-flip viewBox="0 0 24 24">
        <path d="m9 18 6-6-6-6" />
      </svg>
    </li>
    <li><span aria-current="page">组件</span></li>
  </ol>
</nav>

      HTML 结构

      元素或属性用途
      nav.breadcrumb具名导航地标
      直接子 ol按根到当前页面的顺序保存层级
      li > a可导航祖先
      [aria-current="page"]当前页面，只出现一次
      li[aria-hidden="true"]纯视觉分隔符
      [data-rtl-flip]在 RTL 中翻转有方向含义的分隔图标

      状态与变体

      折叠长路径

      窄屏只保留根节点、最近祖先和当前页。折叠项需要告诉辅助技术省略了多少层级；如果用户必须访问被折叠的祖先，组合下拉菜单，不要把不可操作的省略号伪装成按钮。

      实时预览

      组件在空间不足时提供横向滚动作为安全退路，但产品应在已知狭窄布局中主动折叠中间层级。不要让分隔符单独换行，也不要用 CSS 改变路径的语义顺序。

      RTL

      路径顺序仍按“根到当前页”的 DOM 顺序编写，由 dir="rtl" 决定视觉方向。只有箭头、尖括号等方向图标需要 data-rtl-flip；圆点和省略号不翻转。

      可访问性

      每组面包屑都必须有可区分的 aria-label；页面中存在多个导航地标时尤其如此。当前页面使用 aria-current="page" 且不应再次链接到自己。分隔符设置 aria-hidden="true"，避免读屏重复朗读标点。链接文字应使用真实页面名称，不能全部写成“返回”或“更多”。折叠路径若只是省略，提供隐藏说明；若可展开，则使用具名按钮并采用菜单的完整键盘和焦点行为。宿主负责从路由生成稳定层级，组件只负责排列、溢出和方向。