UIkit3.x文档

图标导航

创建由图标组成的导航。

用法

要应用此组件，请将.uk-iconnav 添加到 <ul> 元素。将 <a> 元素用作列表中的菜单单元，并从Icon 组件组件添加需要的图标。要将活动状态应用于菜单项，只需添加.uk-active class。

<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="#" uk-icon="icon: trash"></a></li>
                    </ul>