跳到正文

面包屑

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

纯样式 核心包

示例

在线试用 Markdown 版

代码

<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<ol>（class）每一级一个 <li>，前面的用 <a>，最后一级用 aria-current="page"分隔符由样式画出，不用自己写 /
aria-current="page"最后一个 <li>page当前页，样式加深，读屏读作「当前页」

样式类

zh-crumb

无障碍

  • 外面包一层 <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。