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

Class	Description
`.z-dotnav`	Add this class to a `<ul>` element to define the Dotnav component. Use `<a>` elements as nav items within the list.
`.z-active`	Add this class to a list item to apply an active state.

<ul class="z-dotnav">
  <li class="z-active"><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

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

<ul class="z-dotnav z-dotnav-vertical">
  ...
</ul>