跳到主要内容

文档

图标导航

创建一个包含图标的导航。

用法

要应用此组件，请将 .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>