Компонент Иконочная навигация : Iconnav

Создание навигации, состоящей из иконок, значков. Горизонтальная и вертикальная иконочная навигация.

Использование Iconnav. Руководство.

Чтобы применить компонент UIkit 3 Иконочная навигация, добавьте к элементу <ul> класс .uk-iconnav. В качестве пунктов меню в списке элементов используйте элементы <a> и добавьте иконки из компонента Векторные иконки. Чтобы применить активное состояние к пункту меню, просто добавьте класс .uk-active.

<ul class="uk-iconnav">
    <li><a href="" uk-icon="icon: plus"></a></li>
</ul>

Обычный пример горизонтальной векторной навигации Iconnav,
состоящей из масштабируемых иконок.

  • <ul class="uk-iconnav">
        <li><a href="#" uk-icon="icon: plus"></a></li>
        <li class="uk-active"><a href="#" uk-icon="icon: file-edit"></a></li>
        <li><a href="#" uk-icon="icon: file-text"></a></li>
        <li><a href="#" uk-icon="icon: trash"></a></li>
    </ul>

Вертикальная иконочная навигация

Вертикальное выравнивание навигации. Отличная возможность создать вертикальное меню состоящее из векторных значков. По умолчанию элементы иконочной навигации выровнены по горизонтали. Чтобы применить для навигации вертикальное выравнивание добавьте класс .uk-iconnav-vertical.

<ul class="uk-iconnav uk-iconnav-vertical">...</ul>

Пример. Вертикальное меню из SVG-иконок.

  • <ul class="uk-iconnav uk-iconnav-vertical">
        <li><a href="#" uk-icon="menu"></a></li>
        <li><a href="#" uk-icon="home"></a></li>
        <li><a href="#" uk-icon="user"></a></li>
        <li><a href="#" uk-icon="location"></a></li>
        <li><a href="#" uk-icon="mail"></a></li>
    </ul>

Коллекция UIkit 3 поставляется с собственным набором масштабируемых векторных иконок SVG и обширной иконочной библиотекой. Библиотека иконок фреймворка UIkit 3 может быть увеличена и настроена так, как вам необходимо. Вы можете перезаписать любую из иконок UIkit 3 по умолчанию и / или создать и добавить свои собственные пользовательские иконки SVG для создания вертикального меню Iconnav или горизонтальной навигации состоящей из значков.
Документация
Компоненты