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="youtube"></uk-icon>
    </a>
  </li>
</ul>
Copy to clipboard 
  • <ul class="uk-iconnav">
  <li>
    <a href="#">
      <uk-icon icon="plus"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="file"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="copy"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="shopping-bag"></uk-icon>
    </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>
Copy to clipboard 
  • <ul class="uk-iconnav uk-iconnav-vertical">
  <li>
    <a href="#">
      <uk-icon icon="plus"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="file"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="copy"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="shopping-bag"></uk-icon>
    </a>
  </li>
</ul>

Outline modifier

To apply an outline, just add the .uk-iconnav-outline class.

<ul class="uk-iconnav uk-iconnav-outline">
  <!-- ... -->
</ul>
Copy to clipboard 
  • <ul class="uk-iconnav uk-iconnav-outline">
  <li>
    <a href="#">
      <uk-icon icon="plus"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="file"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="copy"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="shopping-bag"></uk-icon>
    </a>
  </li>
</ul>

Small modifier

Copy to clipboard 
  • <ul class="uk-iconnav uk-iconnav-outline uk-iconnav-small">
  <li>
    <a href="#">
      <uk-icon icon="plus"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="file"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="copy"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="shopping-bag"></uk-icon>
    </a>
  </li>
</ul>

Extra small modifier

Copy to clipboard 
  • <ul class="uk-iconnav uk-iconnav-outline uk-iconnav-xsmall">
  <li>
    <a href="#">
      <uk-icon icon="plus"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="file"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="copy"></uk-icon>
    </a>
  </li>
  <li>
    <a href="#">
      <uk-icon icon="shopping-bag"></uk-icon>
    </a>
  </li>
</ul>
Customize