<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container uk-container-small uk-flex-auto">

        <div class="uk-child-width-1-2@s uk-grid-large" uk-grid>
            <div>

                <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Horizontal</h2>
                <ul class="uk-dotnav">
                    <li class="uk-active"><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                    <li><a href="#">Item 6</a></li>
                </ul>

            </div>
            <div>

            <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Vertical</h2>
                <ul class="uk-dotnav uk-dotnav-vertical">
                    <li class="uk-active"><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                    <li><a href="#">Item 6</a></li>
                </ul>

            </div>
        </div>

    </div>
</div>