Breadcrumb

Breadcrumb 主要用於顯示網站導覽結構並標示當前位置,組件容器以 .crumb 為類別名稱並以此為子組件的前綴詞,每一個結構節點可將 .crumb_item 用於 <span> 標籤上。每一個 .crumb_item 的內容可使用文字、icon 或是符號。

Products Serial Number End
<div class="crumb"> <span class="crumb_item"> <i class="icon"></i> </span> <span class="crumb_item"></span> <span class="crumb_item"></span> </div>

超連結 Hyperlink

若要使用超連結,可在 .crumb_item 內加入 <a class="crumb_link"></a>

<div class="crumb"> <span class="crumb_item"> <a class="crumb_link"> <i class="icon"></i> </a> </span> <span class="crumb_item"> <a class="crumb_link"></a> </span> <span class="crumb_item"></span> </div>

尺寸 Sizes

Breadcrumb 除了預設尺寸之外,另外提供兩種尺寸可以使用,只要在 .crumb 加上小尺寸的 .sz:sm 或 大尺寸的 .sz:lg 即可。

<div class="crumb sz:sm"></div> <div class="crumb sz:lg"></div>

樣式 Styles

Breadcrumb 除了預設的向右符號之外,另外提供五種符號可以選擇。

Dot
:dot

Bullet
:bullet

Slash
:slash

Right-pointing angle quotation mark
:raquo

Right arrow
:rarr
<div class="crumb :dot"></div> <div class="crumb :bullet"></div> <div class="crumb :slash"></div> <div class="crumb :raquo"></div> <div class="crumb :rarr"></div>