We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create a navigation consisting of icons.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Iconnav component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
iconnav: {
hooks: {}
}
}
}),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>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>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>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 | * |
Set the appropriate WAI-ARIA roles, states and properties to the Iconnav component.
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>