Компонент Иконочная навигация 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,
состоящей из масштабируемых иконок.
Вертикальная иконочная навигация
Вертикальное выравнивание навигации. Отличная возможность создать вертикальное меню состоящее из векторных значков. По умолчанию элементы иконочной навигации выровнены по горизонтали. Чтобы применить для навигации вертикальное выравнивание добавьте класс .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> <li><a href="#"><span uk-icon="icon: bag"></span> (17)</a></li> </ul>
Доступность
Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента иконочной навигации Iconnav.
- Установите свойство
aria-label
для элементов<a>
, чтобы описать их значение.
<ul class="uk-iconnav">
<li><a href="" uk-icon="icon: check" aria-label="…"></a></li>
</ul>