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>
Copy to clipboard
  • <ul class="uk-iconnav">
      <li><a href="#" uk-icon="icon: plus; ratio: 0.8"></a></li>
      <li><a href="#" uk-icon="icon: file-edit; ratio: 0.8"></a></li>
      <li><a href="#" uk-icon="icon: copy; ratio: 0.8"></a></li>
      <li>
        <a href="#"><span uk-icon="icon: bag; ratio: 0.8"></span></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; ratio: 0.8"></a></li>
      <li><a href="#" uk-icon="icon: file-edit; ratio: 0.8"></a></li>
      <li><a href="#" uk-icon="icon: copy; ratio: 0.8"></a></li>
      <li>
        <a href="#"><span uk-icon="icon: bag; ratio: 0.8"></span></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="#"><span uk-icon="icon: plus; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: file-edit; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: copy; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: bag; ratio: 0.8"></span></a>
      </li>
    </ul>

Small modifier

Copy to clipboard
  • <ul class="uk-iconnav uk-iconnav-outline uk-iconnav-small">
      <li>
        <a href="#"><span uk-icon="icon: bold; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: italic; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: strikethrough; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: quote-right; ratio: 0.8"></span></a>
      </li>
    </ul>

Extra small modifier

Copy to clipboard
  • <ul class="uk-iconnav uk-iconnav-outline uk-iconnav-xsmall">
      <li>
        <a href="#"><span uk-icon="icon: bold; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: italic; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: strikethrough; ratio: 0.8"></span></a>
      </li>
      <li>
        <a href="#"><span uk-icon="icon: quote-right; ratio: 0.8"></span></a>
      </li>
    </ul>

Accessibility

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

  • Set the aria-label property to the <a> elements to describe their meaning.
<ul class="uk-iconnav">
  <li><a href="" uk-icon="icon: check" aria-label="..."></a></li>
</ul>

Theme development

On your tailwind.config.js file, add the Iconnav component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        iconnav: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-iconnav.uk-iconnav
hook-item.uk-iconnav > * > a
hook-item-hover.uk-iconnav > * > a:hover
hook-item-active.uk-iconnav > .uk-active > a
hook-misc*