Coming Soon

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.

Just a demo

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.

Dotnav

Create a dot navigation to operate slideshows or to scroll to different page sections.

Usage

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Dotnav component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        dotnav: {
            hooks: {}
        }
    }
}),

To create a navigation with dots, use the following classes. This component is built with Flexbox. So to align a dotnav, you can use Flex component or utility classes from Tailwind CSS.

ClassDescription
.uk-dotnavAdd this class to a <ul> element to define the Dotnav component. Use <a> elements as nav items within the list.
.uk-active Add this class to a list item to apply an active state.
<ul class="uk-dotnav">
  <li class="uk-active"><a href=""></a></li>
  <li><a href=""></a></li>
</ul>
Copy to clipboard
  • <ul class="uk-dotnav">
  <li class="uk-active"><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Vertical alignment

The dotnav can also be displayed vertically. Just add the .uk-dotnav-vertical modifier.

<ul class="uk-dotnav uk-dotnav-vertical">
  ...
</ul>
Copy to clipboard
  • <ul class="uk-dotnav uk-dotnav-vertical">
  <li class="uk-active"><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Available hooks

Learn more about using hooks.

Hook NameAffected Classes
hook-dotnav.uk-dotnav
hook-item.uk-dotnav > * > *
hook-item-hover.uk-dotnav > * > :hover
hook-item-onclick.uk-dotnav > * > :active
hook-item-active.uk-dotnav > .uk-active > *
hook-misc*