Dotnav

A navigation bar with anchor links to present sections

Usage

Add dotnav class to <ul> tag.

<section class="flex flex-justify-content-start gap-column-small">
    <div>
        <ul class="dotnav">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</section>

Apperarance

When state is active

Add active class <li> tag.

<section class="flex flex-justify-content-start gap-column-small">
    <div>
        <ul class="dotnav">
            <li class="active"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</section>

Orientation

Horizontal

Horizontal is default orientation

<section class="flex flex-justify-content-start gap-column-small">
    <div>
        <ul class="dotnav">
            <li class="active"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
    <div>
        <ul class="dotnav">
            <li class="active"><a href="#"></a></li>
            <li class="active"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</section>

Vertical

Add dotnav-vertical class to <ul> tag where dotnav-vertical class is located.

<section class="flex flex-justify-content-start gap-column-small">
    <div>
        <ul class="dotnav dotnav-vertical">
            <li class="active"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
    <div>
        <ul class="dotnav dotnav-vertical">
            <li class="active"><a href="#"></a></li>
            <li class="active"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</section>

Variables

Coming soon

Table of contents