Bulma 面包屑是一个简单的导航组件，只需要一个breadcrumb容器和一个ul列表。分隔符自动创建于li标签的::before伪元素的内容中。
您可以使用li标签中的is-active修饰符来告知当前页面。它将禁用内部链接的导航。
赞助商
面包屑
一个简单的面包屑组件，以改善您的导航体验
示例
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>Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|