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.

Accessibility

In addition to the .active class, you must use aria-current="page" state to represent the current location within the local navigation. This is to ensure a better accessibility to assistive technologies (as screenreaders , screen magnifiers…) that can support it by warning the user of the current element position and type, here it’s the current page.

<div class="o-nav-local">
    <nav class="container">
        <ul class="nav">
            <li class="nav-item active"><a class="nav-link" 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 active"><a class="nav-link" 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>