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

Iconnav: Использование

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

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

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

• Результат
• Разметка

• (2)

<ul class="uk-iconnav">
	<li><a uk-icon="icon: bag"> <small>(2)</small></a></li>
    <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-иконок

• Результат
• Разметка

• (17)

<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>
    <li><a href="#"><span uk-icon="icon: bag"></span> (17)</a></li>
</ul>

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

Доступность

Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента иконочной навигации Iconnav.

• Установите свойство aria-label для элементов <a>, чтобы описать их значение.

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