Menu

<div class="menu">
    <ul>
        <li>
            <div class="menu--item">
                <a href="#" aria-label="Active Menu Item link" title="Active Menu Item" class="active">
                    <div class="menu-highlight">
                        <div class="bar"></div>
                    </div>
                    <div class="menu-holder">
                        <span class="blueprint-icon icon-person icon-1x"></span>
                        <span class="menu-label">Active Menu Item</span>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="menu--item">
                <a href="#" aria-label="Default Menu Item link" title="Active Menu Item">
                    <div class="menu-highlight">
                        <div class="bar"></div>
                    </div>
                    <div class="menu-holder">
                        <span class="blueprint-icon icon-attach icon-1x"></span>
                        <span class="menu-label">Default Menu Item</span>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="menu--item">
                <a href="#" aria-label="Default Menu Item link" title="Active Menu Item">
                    <div class="menu-highlight">
                        <div class="bar"></div>
                    </div>
                    <div class="menu-holder">
                        <span class="blueprint-icon icon-email icon-1x"></span>
                        <span class="menu-label">Default Menu Item</span>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="menu--item">
                <a href="#" aria-label="Default Menu Item link" title="Active Menu Item">
                    <div class="menu-highlight">
                        <div class="bar"></div>
                    </div>
                    <div class="menu-holder">
                        <span class="blueprint-icon icon-Default Menu Item icon-1x"></span>
                        <span class="menu-label">Default Menu Item</span>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="menu--item">
                <a href="#" aria-label="Disabled Menu Item link" title="Active Menu Item" class="disabled">
                    <div class="menu-highlight">
                        <div class="bar"></div>
                    </div>
                    <div class="menu-holder">
                        <span class="blueprint-icon icon-duration icon-1x"></span>
                        <span class="menu-label">Disabled Menu Item</span>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="menu--item">
                <a href="#" aria-label="Menu Item with Announcements link" title="Active Menu Item">
                    <div class="menu-highlight">
                        <div class="bar"></div>
                    </div>
                    <div class="menu-holder">
                        <span class="blueprint-icon icon-duration icon-1x"></span>
                        <span class="menu-label">Menu Item with Announcements</span>
                        <span class="menu-badge para--four">5</span>
                    </div>
                </a>
            </div>
        </li>
    </ul>
</div>