Local navigation

Local navigation is used as a secondary level navigation.

Default local navigation

Wrap your <ul> list in a <nav> tag within a .container block. Wrap the whole in a .o-nav-local block.

<div class="o-nav-local">
    <nav class="container">
        <ul class="nav">
            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
        </ul>
    </nav>
</div>

Inverse local navigation

Simply add .inverse class to your .o-nav-local container.

<div style="margin: 2rem 0; padding: 2rem 0;" class="bg-dark">
    <div class="o-nav-local inverse">
        <nav class="container">
            <ul class="nav">
                <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
            </ul>
        </nav>
    </div>
</div>