Иконочная навигация

Создание иконочной навигационной панели.

Как использовать компонент Iconnav в UIkit 3

Для активации компонента добавьте класс .uk-iconnav элементу списка <ul>. Используте теги <a> в качестве пунктов меню в списке. Добавляйте иконки из компонента Icon - иконки. Активное состояние пункта меню традиционно задается классом .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="#" uk-icon="icon: trash"></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="#" uk-icon="icon: trash"></a></li>
    </ul>