Navigation bars

.NavBar

Navigation bars cover the whole width of their parent element.

They typically contain things like menus, links and other information.

Navigation bars are container items and will not have a width and height on their own. They also need to get any visuals like background-color from inheritance or by a modifier like NavBar--apps.

Also note that there is no spacing between items in the navigation bar by default.

Example

Item 1 Item 2 Item 3

Markup

<div class="NavBar">
    <a class="Btn Btn--primary" href="#">Item 1</a>
    <a class="Btn Btn--secondary" href="#">Item 2</a>
    <a class="Btn Btn--primary" href="#">Item 3</a>
</div>

Primary navigation

.NavBar--apps

The primary navigation bar is used to link between the different parts of the control panel.

Example

Markup

<div class="NavBar NavBar--apps">
    <a class="Logo Logo--nav" href="#"></a>
    <ul class="Set Set--apps">
        <li class="Set-item">
            <a class="Set-action Icon Icon--billing Icon--collapsible" href="#">
                <span class="Icon-label">Billing</span>
            </a>
        </li>
        <li class="Set-item is-active">
            <a class="Set-action Icon Icon--hosting Icon--collapsible" href="#">
                <span class="Icon-label">Web Hosting</span>
            </a>
        </li>
        <li class="Set-item">
            <a class="Set-action Icon Icon--cloud Icon--collapsible" href="#">
                <span class="Icon-label">Cloud</span>
            </a>
        </li>
        <li class="Set-item">
            <a id="UserProfile" class="Set-label Icon Icon--collapsible Icon--customer" href="#">
                <span class="Icon-label">example@atomia.com</span>
            </a>
        </li>
    </ul>
</div>

Secondary navigation

.NavBar--sections

The secondary navigation bar is used for utilities and section menus within the current control panel.

Note: To save space in the markup the example menus are not functional.

Example

Markup

<div class="NavBar NavBar--sections">
    <ul class="Set Set--utils">
        <li class="Set-item Set-item--meters">
            <button id="Meters" class="Set-action Icon Icon--gauge Icon--large Icon--standalone" title="Meters">
                <span class="Icon-label">Meters</span>
            </button>
        </li>
    </ul>

    <ul class="Set Set--sections u-left">
        <li class="Set-item">
            <a class="Set-action" href="#">Home</a>
        </li>
        <li class="Set-item">
            <a class="Set-action" href="#">Help</a>
        </li>
    </ul>
</div>

Stacked navigation bars

Navigation bars stack on top of each other.

Example

  • Home
  • Email ...
  • Domains & Websites ...
  • Files ...
  • Databases ...
  • Help