跳至主要内容

文档

Iconnav

创建一个由图标组成的导航。

用法

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

垂直对齐

默认情况下，iconnav 的项目水平对齐。要应用垂直对齐，请添加 .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 角色、状态和属性设置为 Iconnav 组件。

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