範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-breadcrumb">
<a class="item">映画</a>
<a class="item">受賞作</a>
<a class="item is-active">聲の形</a>
</div>
狀態
外觀
讓導覽標記有階段性的感覺,這會讓非啟用的項目全部淡化呈現。
<div class="ts-breadcrumb is-stepped is-chevroned">
<a class="item">聯絡我們</a>
<a class="item">技術問題</a>
<a class="item is-active">表單</a>
</div>
以箭頭分隔項目。
<div class="ts-breadcrumb is-chevroned">
<a class="item">線上購物</a>
<a class="item">24H 送達</a>
<a class="item">智慧型手機</a>
</div>
以基本的連字符號分隔項目。
<div class="ts-breadcrumb is-hyphenated">
<a class="item">無線滑鼠</a>
<a class="item">快速響應</a>
<a class="item">特價下殺</a>
</div>
更改導覽標記的大小。
<div class="ts-breadcrumb is-small">
<a class="item">使用文件</a>
<a class="item">程式開發</a>
<a class="item">Golang</a>
</div>
<div class="ts-breadcrumb">
<a class="item">使用文件</a>
<a class="item">程式開發</a>
<a class="item">Golang</a>
</div>
<div class="ts-breadcrumb is-large">
<a class="item">使用文件</a>
<a class="item">程式開發</a>
<a class="item">Golang</a>
</div>
組合應用
<div class="ts-segment is-secondary">
<div class="ts-breadcrumb is-chevroned">
<a class="item">電影</a>
<a class="item">科幻與冒險</a>
<a class="item">星際效應</a>
</div>
</div>