ダウンロード

ここから始めましょう

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

パンくずリスト

ナビゲーション体験を向上させるためのシンプルなパンくずリストコンポーネント

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変数
値
 
$breadcrumb-item-color
 
var(--bulma-breadcrumb-item-color)
 
var(--bulma-link-text)
 
$breadcrumb-item-hover-color
 
var(--bulma-breadcrumb-item-hover-color)
 
var(--bulma-link-text-hover)
 
$breadcrumb-item-active-color
 
var(--bulma-breadcrumb-item-active-color)
 
var(--bulma-link-text-active)
 
$breadcrumb-item-padding-vertical
 
var(--bulma-breadcrumb-item-padding-vertical)
 
0
 
$breadcrumb-item-padding-horizontal
 
var(--bulma-breadcrumb-item-padding-horizontal)
 
0.75em
 
$breadcrumb-item-separator-color
 
var(--bulma-breadcrumb-item-separator-color)
 
var(--bulma-border)

Bulmaの支援方法

一回限りの寄付

スポンサーをご覧ください

月額寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#