面包屑导航（Breadcrumb）

一个简单的面包屑组件，以改善您的导航体验

1

Bulma 面包屑是一个简单的导航组件，它只需要breadcrumb容器和ul列表。分隔符是在li标记的::before伪元素的内容中自动创建的。

可以使用li标记中的is-active修饰符标注当前页。它将禁用内部链接的导航。

Example

HTML 

<nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

1.对齐

整个面包屑导航在页面中的对齐在breadcrumb容器中，用 is-centered and is-right 修饰符，默认居左

Example

HTML 

<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

Example

HTML 

<nav class="breadcrumb is-right" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

2.字体图标

你可以使用任何Font Awesome字体图标图案，请查看图标字体章节

Example

HTML 

<nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
      <li>
        <a href="#">
          <span class="icon is-small">
            <i class="fas fa-home" aria-hidden="true"></i>
          </span>
          <span>Bulma</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon is-small">
            <i class="fas fa-book" aria-hidden="true"></i>
          </span>
          <span>Documentation</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon is-small">
            <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
          </span>
          <span>Components</span>
        </a>
      </li>
      <li class="is-active">
        <a href="#">
          <span class="icon is-small">
            <i class="fas fa-thumbs-up" aria-hidden="true"></i>
          </span>
          <span>Breadcrumb</span>
        </a>
      </li>
    </ul>
  </nav>

3.中间分隔符

你可以使用下面4中分隔符的一种: 箭头has-arrow-separator ，小球has-bullet-separator ，点has-dot-separator ，大于号 has-succeeds-separator.

Example

HTML 

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

Example

HTML 

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

Example

HTML 

<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

Example

HTML 

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

4.大小

你可以选择以下三种: is-small is-medium and is-large。
俺老刘提示:应该是4种，不写介于small和medium之间，is-normal不知是否有效。

Example

HTML 

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

Example

HTML 

<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

Example

HTML 

<nav class="breadcrumb is-large" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Bulma</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Components</a></li>
      <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
  </nav>

5.变量

Name
Type
Value
Computed Value
Computed Type 
$breadcrumb-item-color
variable
$link
hsl(229, 53%,  53%)
color
$breadcrumb-item-hover-color
variable
$link-hover
hsl(0, 0%, 21%)
color
$breadcrumb-item-active-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$breadcrumb-item-padding-vertical
string
0
$breadcrumb-item-padding-horizontal
size
0.75em
$breadcrumb-item-separator-color
variable
$border-hover
hsl(0, 0%, 71%)
color

返回头部

23222

问题反馈
返回顶部