面包屑导航（Breadcrumb）

面包屑导航（Breadcrumb）用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。

On this page

示例

通过使用带有链接列表项（<li> 元素）的有序（<ol> 元素）或无序列表（<ul> 元素）来创建一个具有最少样式的面包屑导航（breadcrumb）组件。使用我们提供的工具类可以根据需要添加其它样式。

html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

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

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

改变分隔符

分隔符是通过 CSS 的 ::before 和 content 两个属性自动添加的。如果需要的话，可以通过修改本地的自定义 CSS 属性 --bs-breadcrumb-divider 或 Sass 变量 $breadcrumb-divider（以及对应 RTL 的变量 $breadcrumb-divider-flipped）对其进行修改。我们默认使用 Sass 变量，因为它是自定义属性的后备。这样操作后，你就拥有了一个新的全局分隔符，并且任何时候都无需重新编译 CSS。

html

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

当通过 Sass 变量修改分隔符时，可以使用 Sass 中的 quote 函数（此函数用于生成字符串两侧的引号）。例如，使用 > 字符作为分隔符的话，你可以这样做：

$breadcrumb-divider: quote(">");

也可以使用 嵌入式 SVG 图标 作为分隔符。覆盖对应的自定义 CSS 属性或 Sass 变量即可。

Using embedded SVG

Inlining SVG as data URI requires to URL escape a few characters, most notably <, > and #. That’s why the $breadcrumb-divider variable is passed through our escape-svg() Sass function. When using the CSS custom property, you need to URL escape your SVG on your own. Read Kevin Weber’s explanations on CodePen for detailed information on what to escape.

html

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

你还可以通过设置 --bs-breadcrumb-divider: ''; （为自定义 CSS 属性设置空字符串）或者 Sass 变量 $breadcrumb-divider: none; 来删除分隔符。

html

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: none;

可访问性

由于面包屑导航（breadcrumb）组件提供了导航功能，因此，最好添加一个有意义的标签（例如 aria-label="breadcrumb"）来描述 <nav> 元素中提供的导航的类型，并且为最后一个条目添加 aria-current="page" 以表示其代表的是当前页面。

For more information, see the ARIA Authoring Practices Guide breadcrumb pattern.

CSS

变量

Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use local CSS variables on .breadcrumb for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Sass variables

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          var(--#{$prefix}secondary-color);
$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;