Dotnav

Create a dot navigation with a horizontal or vertical layout to navigate through slideshows or to scroll to different page sections.

Usage

To create a navigation with dots, just add the .f-dotnav class to an <ul> element and nest <a> elements within the list. This is perfect to create a typical slideshow navigation. This component is built with Flexbox. So to align a dotnav, you can use Flex component.

Example

Markup

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

Dotnav and images

For better visibility on images, for example when using the Dotnav as a slideshow navigation, just add the .f-dotnav-contrast class.

Example

NOTE In this example we also applied the .f-flex-center class from the Flex component to center the dotnav.

Markup

<ul class="f-dotnav f-dotnav-contrast f-flex-center">
	<li class="f-active"><a href="">...</a></li>
	<li><a href="">...</a></li>
</ul>

Vertical dotnav

The Dotnav can also be aligned vertically. Just add the .f-flex-column class. This is great for page scroll navigation using the Scrollspy component.

Example

Markup

<ul class="f-dotnav f-flex-column">
	<li class="f-active"><a href="">...</a></li>
	<li><a href="">...</a></li>
</ul>