跳至主要內容

文件

麵包屑

建立麵包屑以顯示使用者在網站中的位置。

使用方式

麵包屑元件由並排對齊並以分隔線分隔的連結組成。將 .uk-breadcrumb 類別新增至 <ul> 元素以定義元件。在清單中使用 <a> 元素作為麵包屑項目。活動狀態會自動套用至最後一個 <li> 元素。

若要新增沒有連結的清單項目，請使用 <span> 元素，而不是 <a>。或者，透過將 .uk-disabled 類別新增至 <li> 元素並從錨點移除 href 屬性來停用 <a> 元素，使其無法透過鍵盤導覽存取。

<ul class="uk-breadcrumb">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>
<nav aria-label="Breadcrumb">
    <ul class="uk-breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Linked Category</a></li>
        <li class="uk-disabled"><a>Disabled Category</a></li>
        <li><span aria-current="page">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</nav>

輔助功能

為了讓麵包屑元件符合麵包屑設計模式，請設定適當的 WAI-ARIA 角色、狀態和屬性。

<nav aria-label="Breadcrumb">
    <ul class="uk-breadcrumb">…</ul>
</nav>