Menu Item

Examples for the ss-c-menu-item module.

Menu

HTML 
<nav class="ss-c-menu">
            <a class="ss-c-menu-item" href="#">
                <span class="ss-c-menu-item__icon">&#9642;</span>
                <span class="ss-c-menu-item__label">Dashboard</span>
            </a>
            <a class="ss-c-menu-item" href="#">
                <span class="ss-c-menu-item__icon">&#9642;</span>
                <span class="ss-c-menu-item__label">Projects</span>
            </a>
        </nav>

Active

Active state is driven by aria-current="page", data-active="true" or .is-active.

HTML 
<nav class="ss-c-menu">
            <a class="ss-c-menu-item" href="#">
                <span class="ss-c-menu-item__label">Dashboard</span>
            </a>
            <a class="ss-c-menu-item" href="#" aria-current="page">
                <span class="ss-c-menu-item__label">Projects</span>
            </a>
        </nav>

With badge

HTML 
<nav class="ss-c-menu">
            <a class="ss-c-menu-item" href="#">
                <span class="ss-c-menu-item__icon">&#9642;</span>
                <span class="ss-c-menu-item__label">Inbox</span>
                <span class="ss-c-menu-item__badge">12</span>
            </a>
        </nav>