Skip to main content

Documentation

Iconnav

Create a navigation consisting of icons.

Usage

To apply this component, add the .uk-iconnav class to a <ul> element. Use <a> elements as menu items within the list and add icons from the Icon component. To apply an active state to a menu item, just add the .uk-active class.

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

Vertical alignment

By default, the items of an iconnav are aligned horizontally. To apply a vertical alignment, add the .uk-iconnav-vertical class.

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

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the Iconnav component. 

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