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>