JB Framework

Navmenus

Vertical

• John
• Paul
• George
• Ringo

<ul class="navmenu">
    <li class="navmenu__item">
        <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">Paul</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">George</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
    </li>
</ul>

Horizontal

• John
• Paul
• George
• Ringo

<ul class="navmenu navmenu--horizontal">
    <li class="navmenu__item">
        <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">Paul</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">George</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
    </li>
</ul>

Responsive

• John
• Paul
• George
• Ringo

<ul class="navmenu navmenu--horizontal--large">
    <li class="navmenu__item">
        <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">Paul</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">George</a>
    </li>
    <li class="navmenu__item">
        <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
    </li>
</ul>

Responsive off-canvas

<button class="off-canvas__toggle button--icon icon icon--menu hide--large" data-off-canvas="#off-canvas" type="button">Show Menu</button>
<div class="off-canvas off-canvas--right on-canvas--large" id="off-canvas">
    <ul class="navmenu navmenu--horizontal--large">
        <li class="navmenu__item">
            <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Paul</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">George</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
        </li>
    </ul>
</div>