# 面包屑

纯样式组件：不需要 JS，写好标记即可。页面层级路径。当前页用 aria-current="page"；手机宽度只保留最后两级。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<nav aria-label="面包屑">
  <ol class="zh-crumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">内容管理</a></li>
    <li aria-current="page">文章管理</li>
  </ol>
</nav>
```

## 样式类

`zh-crumb`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-crumb` | <ol>（class） | 每一级一个 <li>，前面的用 <a>，最后一级用 aria-current="page" | 分隔符由样式画出，不用自己写 / |
| `aria-current="page"` | 最后一个 <li> | page | 当前页，样式加深，读屏读作「当前页」 |

## 无障碍

- 外面包一层 <nav aria-label="面包屑">
- 使用有序列表 <ol>，层级关系读屏可感知
- 手机宽度（≤ 767px）只显示最后两级，其余在样式里隐藏，读屏仍然可读到完整路径

## 常见问题

### 面包屑是什么？

页面层级路径。当前页用 aria-current="page"；手机宽度只保留最后两级。

### 怎么使用面包屑？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 面包屑支持键盘和读屏吗？

外面包一层 <nav aria-label="面包屑">；使用有序列表 <ol>，层级关系读屏可感知；手机宽度（≤ 767px）只显示最后两级，其余在样式里隐藏，读屏仍然可读到完整路径。

### 面包屑需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。