面包屑 · Bootstrap 6.0 中文文档

示例

使用有序列表与 .breadcrumb-item 对于每一页和 .breadcrumb-divider 它们之间的元素。将分隔符留空以使用默认的箭头图标，或添加你自己的分隔内容。添加 .active 到 .breadcrumb-link 当前页面的。

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider"></li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Library</a>
    </li>
    <li class="breadcrumb-divider"></li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Data</a>
    </li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider"></li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor"><circle cx="2" cy="8" r="2"/><circle cx="8" cy="8" r="2"/><circle cx="14" cy="8" r="2"/></svg>
      </a>
    </li>
    <li class="breadcrumb-divider"></li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Documents</a>
    </li>
    <li class="breadcrumb-divider"></li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">2026</a>
    </li>
  </ol>
</nav>

分隔线

分隔符可以通过显式使用 .breadcrumb-divider 元素添加。空分隔符会呈现默认的箭头图标，该图标由 CSS mask 绘制，因此它会继承分隔符的颜色（包括在暗模式下）。要使用不同的分隔符，可以添加自己的内容——任何 SVG 图标、文本字符或自定义标记——将覆盖默认分隔符。

默认分隔符

将 .breadcrumb-divider 保持为空以获得内置的箭头。通过重写 --bs-breadcrumb-divider-icon、--bs-breadcrumb-divider-width 和 --bs-breadcrumb-divider-height 变量可以全局自定义它。

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider"></li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Library</a>
    </li>
  </ol>
</nav>

SVG 分隔线

在分隔线上添加内联 SVG，以使用你自己清晰、可缩放的图标覆盖默认设置。使用 currentColor 作为描边或填充，以便继承分隔线的颜色，方便主题化。

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708"/>
        <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708"/>
      </svg>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Library</a>
    </li>
  </ol>
</nav>

文本分隔符

对于简单的基于文本的分隔符，只需直接添加字符即可。

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">/</li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Library</a>
    </li>
    <li class="breadcrumb-divider">/</li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Data</a>
    </li>
  </ol>
</nav>

自定义分隔符

可以使用任何你喜欢的内容——不同的图标、装饰元素或主题分隔符。

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Home</a>
    </li>
    <li class="breadcrumb-divider">›</li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="#">Library</a>
    </li>
    <li class="breadcrumb-divider">›</li>
    <li class="breadcrumb-item" aria-current="page">
      <a class="breadcrumb-link active" href="#">Data</a>
    </li>
  </ol>
</nav>

无障碍访问

由于面包屑提供导航，因此遵循以下做法非常重要：

将 aria-label="breadcrumb" 添加到 <nav> 元素以描述导航类型
将 aria-current="page" 添加到包含当前页面的 .breadcrumb-item 中
通过 CSS，分隔符元素会自动对辅助技术隐藏

欲了解更多信息，请参见 ARIA 作者实践指南面包屑模式。

CSS

变量

面包屑在.breadcrumb上使用本地 CSS 变量以实现实时自定义。CSS 变量的值由每个组件特有的 Sass map生成，并应用于前述类。

scss/_面包屑.scss

// stylelint-disable-next-line scss/dollar-variable-default
$breadcrumb-tokens: defaults(
  (
    --breadcrumb-font-size: inherit,
    --breadcrumb-bg: transparent,
    --breadcrumb-border-radius: var(--radius-5),
    --breadcrumb-divider-color: var(--fg-4),
    --breadcrumb-divider-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 2l4 6-4 6'/></svg>"))},
    --breadcrumb-divider-width: .375rem,
    --breadcrumb-divider-height: .75rem,
    --breadcrumb-link-padding-x: .75rem,
    --breadcrumb-link-padding-y: .25rem,
    --breadcrumb-link-color: var(--fg-3),
    --breadcrumb-link-hover-color: var(--fg-2),
    --breadcrumb-link-hover-bg: var(--bg-1),
    --breadcrumb-link-active-color: var(--fg-1),
    --breadcrumb-link-border-radius: var(--radius-7),
  ),
  $breadcrumb-tokens
);