Menus

Secondary navigation menu

The secondary navigation menu is intended to live in a left hand sidebar of a web page. See an example on calgary.ca.

The secondary navigation menu is a fully responsive menu. For mobile and tablet views, the menu is collapsed by default. For larger screens, the menu is always expanded. JavaScript is used to handle expanding and collapsing the menu for mobile and tablet views.

Demo

<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="{{ Navigation id }}" class="cui nav-secondary localNav">
    <button class="nav-btn-mobile expandBtn" type="button"
    aria-controls="{{ Navigation id }}" aria-haspopup="true"
    aria-label="{{ Label for Assistive Technology users (e.g. Open secondary navigation) }}">
        {{ Secondary navigation menu name }}
    </button>
    <button class="nav-btn-mobile collapseBtn" type="button"
    aria-controls="{{ Navigation id }}"
    aria-label="{{ Label for Assistive Technology users (e.g. Close secondary navigation) }}">
        {{ Secondary navigation menu name }}
    </button>
    <ul class="nav-menu">
        <!-- Example first link. Add the `first` class to the <li> -->
        <li class="first"><a href="{{ URL }}">{{ Link name }}</a></li>

        <!-- Example active link. Add the `active` class to the <li> -->
        <li class="active"><a href="{{ URL }}">{{ Link name }}</a></li>

        <!-- Example normal link. -->
        <li><a href="{{ URL }}">{{ Link name }}</a>
            <!-- Example child link -->
            <ul>
                <li><a href="{{ URL }}">{{ Child link name }}</a></li>
            </ul>
        </li>
    </ul>
</nav>

Other navigation

Related links

<nav aria-label="{{ Label for Assistive Technology users (e.g. Related links) }}">
    <!-- Any heading tag may be used as long as the class `related-links-title` is used -->
    <h3 class="related-links-title">Related links</h3>
    <ul class="cui list-widget regular-link">
        <li><a href="{{ URL }}">{{ Link text }}</a></li>
        <li><a href="{{ URL }}">{{ Link text }}</a></li>
        <li><a href="{{ URL }}">{{ Link text }}</a></li>
    </ul>
</nav>

Arrowed list style

<nav aria-label="{{ Label for Assistive Technology users (e.g. Main menu) }}">
    <ul class="cui list-widget arrowed">
        <!-- If the first list item is the most important, a <strong> tag may be used to bold it.
             Only the first list item may be bolded. -->
        <li><a href="{{ URL }}"><strong>{{ Link name }}</strong></a></li>
        <li><a href="{{ URL }}">{{ Link name }}</a></li>
        <li><a href="{{ URL }}">{{ Link name }}</a></li>
    </ul>
</nav>

Mega navigation menu

The mega menu has been designed to work in conjunction with the header pattern. Each menu item can turn into a large dropdown menu that utilizes the full width of the pattern. In the dropdowns below, the catalogue group pattern is utilized to organize the sub-menu links.

Demo

• Skip to main content

<script src="jquery-2.2.4.min.js"></script>
<script src="coc.nav.js"></script>
<script>
    $( document ).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="#{{ Main container id }}" class="skip-link">
                    Skip to main content
                </a>
            </li>
        </ul>

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

        <!-- Mega navigation menu -->
        <button class="cui nav-mega-btn-open"
        aria-controls="navId" aria-haspopup="true"
        aria-label="{{ Label for Assistive Technology users (e.g. Open menu) }}">
            <span class="cicon-bars" aria-hidden="true"></span>
        </button>
    </div>

    <nav id="navId" class="cui globalNav">
        <button class="cui nav-mega-btn-close"
        aria-controls="navId" aria-haspopup="true"
        aria-label="{{ Label for Assistive Technology users (e.g. Close menu) }}">
            Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
        </button>
        <!-- Simplified for brevity -->
        <ul class="nav-menu">
            <!-- Basic menu item -->
            <li class="nav-item">
                <a href="{{ URL }}">{{ Menu item name }}</a>
            </li>
            <!-- Menu item with a 4 column dropdown -->
            <li class="nav-item">
                <!-- NOTE: The URL for the menu item is necessary for graceful
                     degradation should the JavaScript not be loaded. -->
                <a class="has-dropdown" href="{{ URL }}" aria-expanded="false">{{ Menu item name }} <span class="cicon-angle-down" aria-hidden="true"></span></a>
                <div id="{{ Sub nav id (e.g. sub-nav-1) }}" class="sub-nav" role="dialog" aria-expanded="false" aria-label="{{ Sub nav label (e.g. (Menu item name) sub navigation) }}">
                    <button class="btn-close-sub-nav-group" aria-label="Close navigation dialog" aria-controls="{{ Sub nav id (e.g. sub-nav-1) }}">
                        Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
                    </button>
                    <ul>
                        <!-- Customize the Bootstrap grid column class to suit your needs -->
                        <li class="sub-nav-group col-lg-3">
                            {{ Catalogue group HTML }}
                        </li>
                        <li class="sub-nav-group col-lg-3">
                            {{ Catalogue group HTML }}
                        </li>
                        <li class="sub-nav-group col-lg-3">
                            {{ Catalogue group HTML }}
                        </li>
                        <li class="sub-nav-group col-lg-3">
                            {{ Catalogue group HTML }}
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</header>