Dotnav

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

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Table of contents

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

Vertical alignment

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

Customize

Customize your Franken UI experience.