Breadcrumb

一个简单的 breadcrumb 组件会提升您的导航体验

Bulma 的 breadcrumb 是一个简单的导航组件——只需要一个 breadcrumb 容器和一个 ul 列表即可。分隔符会自动由 li 标签的 ::before 伪元素自动生成。

您可以使用 is-active 修饰符在当前页的 li 标签上做标记。这会使导航的内部链接失效。

示例

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>

对齐方式 #

除了默认的对齐方式，还可以在 breadcrumb 容器上使用 is-centered 和 is-right 修饰符。

示例

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>

示例

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>

图标 #

您可以使用任何 Font Awesome 图标。

示例

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>

分隔符号 #

您还可以选择 4 种另外的分隔符号： has-arrow-separator has-bullet-separator has-dot-separator 和 has-succeeds-separator。

示例

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>

示例

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>

示例

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>

示例

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>

型号 #

您可以选择 3 种另外的型号：is-small is-medium 和 is-large。

示例

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>

示例

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>

示例

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>

Variables #

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

Made with Bulma 此页面为开放源码页面。 发现排版问题？或者表达模糊？
在 GitHub 改进该页内容

支持 Bulma 😃

一次性捐献

访问我们的赞助商

Stock APIs kasinohai casinoutanlicens

按月捐献

成为赞助商
#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布！