COMPONENT 06 · Navigation & Orientation

面包屑

Breadcrumb

也叫Breadcrumb Trail路径导航面包屑导航

显示当前页面在层级结构中的路径，并允许返回上级。

Shows the current page's location in a hierarchy and links back to ancestors.

ANATOMY & USAGE

结构与使用建议

组成部分

导航容器
祖先链接
当前页

适合使用

网站层级较深且用户可能从中间页面进入时。

不建议使用

扁平结构或只有一层页面时。

键盘与无障碍

使用 nav aria-label=面包屑和有序列表；当前页设置 aria-current=page。

DESCRIBE IT TO AI

这样告诉编程助手

实现面包屑（Breadcrumb）：显示当前页面在层级结构中的路径，并允许返回上级。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<nav class="demo" aria-label="面包屑">
  <ol class="row">
    <li>
      <a href="/">首页</a>
    </li>
    <li>
      <a href="/components">组件</a>
    </li>
    <li aria-current="page">面包屑</li>
  </ol>
</nav>