Dotnav

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

Usage

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>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
      <li><a>Item 4</a></li>
      <li><a>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>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
      <li><a>Item 4</a></li>
      <li><a>Item 5</a></li>
    </ul>

Theme development

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

import ui from "franken-ui";

ui({
    components: {
        dotnav: {
            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-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*