Navbar

In ZoaUI, the navbar provides an organized and responsive way of navigation. A navbar can seamlessly contain links, forms, and dropdowns. This component relies on JavaScript.

Note: the value of the toggle button’s data-zo-navbar attribute should match the corresponding .zo-navbar__nav’s id attribute—or whichever selector.

<div class="zo-navbar zo-navbar--bordered">
    <a href="#" class="zo-navbar__link zo-navbar__toggle" role="button" data-zo-navbar="#nav1"></a>
    <h2 class="zo-navbar__brand">
        <a href="#" class="zo-navbar__link zo-navbar__brand__link">ZoaUI</a>
    </h2>
    <div class="zo-navbar__nav" id="nav1">
        <ul class="zo-navbar__list">
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo--active">Active item</a>
            </li>
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link">Another</a>
            </li>
        </ul>
        <ul class="zo-navbar__list zo-navbar__list--right">
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link">Hyperlink</a>
            </li>
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link">Another</a>
            </li>
        </ul>
    </div>
</div>

Alternate backgrounds, borders and border radii

Navbars can also be styled in ZoaUI’s primary color. By default they have only a border at the bottom. However they can be made bordered by adding .zo-navbar--bordered, or borderless by .zo-navbar--borderless.

Rounded corners can be achieved by adding the zo--radius class.

Note: the deprecated zo-navbar--radius class would set the navbar’s border-radius to 6px instead of 4px.

<div class="zo-navbar zo-navbar--dark">
    <a href="#" class="zo-navbar__link zo-navbar__toggle zo-navbar__link--bgDark" role="button" data-zo-navbar="#nav2"></a>
    <h2 class="zo-navbar__brand">
        <a href="#" class="zo-navbar__link zo-navbar__brand__link zo-navbar__link--bgDark">ZoaUI</a>
    </h2>
    <div class="zo-navbar__nav zo-navbar__nav--bgDark" id="nav2">
        <ul class="zo-navbar__list">
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Hyperlink</a>
            </li>
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Another</a>
            </li>
        </ul>
        <ul class="zo-navbar__list zo-navbar__list--right">
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Hyperlink</a>
            </li>
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Another</a>
            </li>
        </ul>
    </div>
</div>

Borderless with a radius

<div class="zo-navbar zo-navbar--dark zo-navbar-borderless zo--radius">
    <a href="#" class="zo-navbar__link zo-navbar__toggle zo-navbar__link--bgDark" role="button" data-zo-navbar="#nav3"></a>
    <h2 class="zo-navbar__brand">
        <a href="#" class="zo-navbar__link zo-navbar__brand__link zo-navbar__link--bgDark">ZoaUI</a>
    </h2>
    <div class="zo-navbar__nav zo-navbar__nav--bgDark zo--radius" id="nav3">
        <ul class="zo-navbar__list">
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Hyperlink</a>
            </li>
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Another</a>
            </li>
        </ul>
        <ul class="zo-navbar__list zo-navbar__list--right">
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Hyperlink</a>
            </li>
            <li class="zo-navbar__item">
                <a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">Another</a>
            </li>
        </ul>
    </div>
</div>