面包屑

面包屑-Bootstrap 5和Material Design 2.0组件

在自动添加的导航层次结构中指示当前页面的位置 通过CSS分隔符。


基本例子


          <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>
        

导航栏中的面包屑

面包屑通常放在 navbar 中。


          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <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"><a href="#">Data</a></li>
                </ol>
              </nav>
            </div>
          </nav>
        

更换隔板

分隔符通过以下方式自动添加到CSS中 ::beforecontent. 可以通过更改 $ breadcrumb-divider 进行更改。的 quote 需要函数来生成字符串周围的引号,因此如果需要 > 作为分隔符,您可以使用以下命令:


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

也可以使用嵌入的SVG图标


          $breadcrumb-divider: url("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='currentColor'/%3E%3C/svg%3E");
        

可以通过将 $ breadcrumb-divider 设置为 none 来删除分隔符:


          $breadcrumb-divider: none;
        

辅助功能

由于面包屑可提供导航,因此最好添加有意义的标签,例如 aria-label =“ breadcrumb” 来描述导航栏中提供的导航类型 &lt; nav&gt; 元素,以及将 aria-current =“ page” 应用于 集合的最后一项,表示它代表当前页面。

有关更多信息,请参见 面包屑模式的WAI-ARIA创作实践.