Navbar

Use pre-determined navbar themes to style the navbar object. Refer back to design mocks to pick the correct theme for the page you are styling.

Use the following examples as "skeletons" or templates for your navigation bar.

Simple Navbar Template

The following basic Navbar examples that do not have any aesthetics, build out separate themes that add styles and keep this object abstract so that it can be used to build further navbars for different scenarios.

Navbar Alignment

Use alignment areas in the navbar to align content left, center or right.

<nav class="o-navbar">
    <div class="o-wrapper">
        <div class="o-navbar__wrapper">
            <div class="o-navbar__left">
                <ul class="o-navbar__nav o-list-inline | u-gap-sm">
                    <li class="o-list__item">
                        <a href="#navleft1">Item 1 Foo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft2">Item 2 Boo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft3">Item 3 Koo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft4">Item 4 Poo</a>
                    </li>
                </ul>
            </div>
            <div class="o-navbar__right">
                <button class="c-btn" type="button">Button Right</button>
            </div>
        </div>
    </div>
</nav>

<nav class="o-navbar">
    <div class="o-wrapper">
        <div class="o-navbar__wrapper">
            <div class="o-navbar__left">
                <button class="c-btn" type="button">Button Left</button>
            </div>
            <div class="o-navbar__center">
                <ul class="o-navbar__nav o-list-inline | u-gap-sm">
                    <li class="o-list__item">
                        <a href="#navleft1">Item 1 Foo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft2">Item 2 Boo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft3">Item 3 Koo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft4">Item 4 Poo</a>
                    </li>
                </ul>
            </div>
            <div class="o-navbar__right">
                <button class="c-btn" type="button">Button Right</button>
            </div>
        </div>
    </div>
</nav>

<nav class="o-navbar">
    <div class="o-wrapper">
        <div class="o-navbar__wrapper">
            <div class="o-navbar__left">
                <button class="c-btn" type="button">Button Left</button>
            </div>
            <div class="o-navbar__right">
                <ul class="o-navbar__nav o-list-inline | u-gap-sm">
                    <li class="o-list__item">
                        <a href="#navleft1">Item 1 Foo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft2">Item 2 Boo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft3">Item 3 Koo</a>
                    </li>
                    <li class="o-list__item">
                        <a href="#navleft4">Item 4 Poo</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Responsive Alignment

Position the navbar child elements at different breakpoints using a responsive suffix.

Navbar

The navbar is a common object that positions navigation and other elements in a concise header. This is a re-useable navbar layout, intended to be extended with further component themes to add style and functionality.

Simple Navbar Template

Navbar Alignment

Responsive Alignment

Useful notes and reading:

Related Themes:

Related Links: