面包屑导航
v2.0.5+

面包屑是一种辅助导航组件，用于显示当前页面在站点层级中的位置。纯 CSS 实现，无需 JS。

基础用法

  • Preview
  • Code
<ul class="bny-breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">组件</a></li>
    <li><a href="#">导航</a></li>
    <li>面包屑</li>
</ul>

分隔符样式

  • Preview
  • Code

默认 /

箭头 ›

短线 —

圆点 •

<!-- 斜杠（默认） -->
<ul class="bny-breadcrumb">
    <li><a href="#">首页</a></li>
    <li>当前页</li>
</ul>

<!-- 箭头 -->
<ul class="bny-breadcrumb arrow">...</ul>

<!-- 短线 -->
<ul class="bny-breadcrumb dash">...</ul>

<!-- 圆点 -->
<ul class="bny-breadcrumb dot">...</ul>

带图标

  • Preview
  • Code
<ul class="bny-breadcrumb arrow">
    <li><a href="#">
        <i class="bny-icon icon-home-fill"></i>首页
    </a></li>
    <li><a href="#">
        <i class="bny-icon icon-file"></i>文档
    </a></li>
    <li>面包屑</li>
</ul>

深层嵌套

  • Preview
  • Code
<ul class="bny-breadcrumb arrow">
    <li><a href="#">首页</a></li>
    <li><a href="#">管理后台</a></li>
    <li><a href="#">内容管理</a></li>
    <li><a href="#">文章列表</a></li>
    <li><a href="#">编辑文章</a></li>
    <li>SEO 设置</li>
</ul>

自定义分隔符

  • Preview
  • Code

通过 CSS 变量 --bny-sep 自定义分隔符，配合 .custom 类使用。

<ul class="bny-breadcrumb custom" style="--bny-sep: '→'">
    <li><a href="#">首页</a></li>
    <li>当前页</li>
</ul>

API

CSS 类

类名 说明
bny-breadcrumb 基础类，默认斜杠 / 分隔
.arrow 箭头 › 分隔符
.dash 短线 — 分隔符
.dot 圆点 • 分隔符
.custom 配合 style="--bny-sep: '→'" 自定义分隔字符

规则

最后一项自动加粗、灰色变深、链接不可点（pointer-events: none），表示当前所在位置。