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

Создание навигации 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 или горизонтальной навигации состоящей из значков.
Документация
Компоненты