跳至主要內容

文件

圖示導航

建立一個由圖示組成的導航。

用法

要套用此組件，請將 .uk-iconnav 類別新增至 <ul> 元素。 使用 <a> 元素作為列表中的選單項目，並新增圖示組件中的圖示。 要將啟用狀態套用至選單項目，只需新增 .uk-active 類別。

<ul class="uk-iconnav">
    <li><a href="" uk-icon="icon: check"></a></li>
</ul>
<ul class="uk-iconnav">
    <li><a href="#" uk-icon="icon: plus"></a></li>
    <li><a href="#" uk-icon="icon: file-edit"></a></li>
    <li><a href="#" uk-icon="icon: copy"></a></li>
    <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
</ul>

垂直對齊

預設情況下，圖示導航的項目是水平對齊的。 要套用垂直對齊，請新增 .uk-iconnav-vertical 類別。

<ul class="uk-iconnav uk-iconnav-vertical">…</ul>
<ul class="uk-iconnav uk-iconnav-vertical">
    <li><a href="#" uk-icon="icon: plus"></a></li>
    <li><a href="#" uk-icon="icon: file-edit"></a></li>
    <li><a href="#" uk-icon="icon: copy"></a></li>
    <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
</ul>

無障礙

將適當的 WAI-ARIA 角色、狀態和屬性設定到圖示導航組件。

<ul class="uk-iconnav">
    <li><a href="" uk-icon="icon: check" aria-label="…"></a></li>
</ul>