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; 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>

<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>

<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

<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

<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 Name	Affected 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`	`*`