Menus

Code

<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/coc.nav.js"></script>
<script>
    $(document).ready(function() {
        COC.Nav.InitLocalNav();
    });
</script>

<nav id="nav-secondary" class="nav-secondary localNav">
    <button class="nav-btn-mobile expandBtn" type="button" aria-controls="nav-secondary" aria-haspopup="true" aria-label="Open the secondary navigation menu">Secondary navigation menu name</button>
    <button class="nav-btn-mobile collapseBtn" type="button" aria-controls="nav-secondary" aria-label="Close the secondary navigation menu">Secondary navigation menu name</button>
    <ul class="nav-menu">
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Lorem ipsum dolor</a>
            <ul>
                <li><a href="#">Child link 1</a></li>
                <li><a href="#">Child link 2</a></li>
            </ul>
        </li>
        <li><a href="#">Consectetur adipiscing</a></li>
        <li class="active"><a href="#">Active link</a></li>
        <li>
            <a href="#">Mattis augue finibus</a>
            <ul>
                <li><a href="#">Child link 3</a></li>
                <li><a href="#">Child link 4</a></li>
            </ul>
        </li>
    </ul>
</nav>

Code

<script src="jquery-2.2.4.min.js"></script>
<script src="coc.nav.js"></script>
<script>
    $( '#navId' ).ready(function() {
        COC.Nav.Init();
    });
</script>

<header class="cui coc-header with-nav-only">
    <div class="header-inner">
        <!-- Skip links provide screen readers and keyboard users a shortcut to the main content area -->
        <ul class="skip-links">
            <li><a href="#content" class="skip-link">Skip to main content</a></li>
            <li><a href="#search-field" class="skip-link">Skip to search</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/coc-logo.svg" alt="Return to the homepage" class="coc-logo-desktop">
        </a>

        <!-- Mega navigation menu -->
        <button id="exploreBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Open menu">
            <span class="sr-only">Explore</span>
            <span class="cicon-bars"></span>
        </button>

        <nav id="navId" class="cui globalNav">
            <button id="closeBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Close menu">
                Close<span class="cicon-close-thin-large"></span>
            </button>
            <!-- Simplified for brevity -->
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#">Menu item</a>
                </li>
                <li class="nav-item">
                    <a href="#">Menu item</a>
                </li>
                <li class="nav-item">
                    <a href="#">Menu item</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

Accessibility

For detailed accessibility guidelines, refer to the Accessible Mega Menu.

• Keyboard Accessibility
• Screen Reader Accessibility

Make sure all the items in the menu are placed in an unordered list. Please do not use heading tags in the menu.