Secondary Menu

Correct use

Compliance point(s):

• The section menu should only be used on pages below Canada.ca’s global themes/topics layer. Topic pages are part of the wayfinding/themes/topics space and do not permit the use of local navigation menus.
• Site destination/task sections which would benefit from allowing users to move laterally can make use of a local menu to facilitate navigation between the destinations contained within the last/lowest subtopic in the Canada.ca theme/topic hierarchy.
• The section menu should always display the destinations/tasks from the lowest-level subtopic above the user’s location, and should not change as the user moves deeper into destination/task content.
• Additionally, when a section menu is employed, it should be present on all pages belonging to that lowest-level subtopic. So, the section menu should not disappear after a user selects an item from the menu.
• The first item in the menu is a non-clickable header, reflecting the title of the last/lowest subtopic. The clickable items in the menu are the sibling destinations/pages listed on that lowest subtopic page.
• The section menu should only go one level deep. It should not attempt to display links to sub-pages below the current page. Instead, all navigation within/below the current page should be handled using elements in the content area.
• (Related note: the “related information” block should not be used for navigation. Instead, all links in a page’s content area (including related info links) should be contextual; limited to information that is directly related to the current page.

Code

<nav role="navigation" id="wb-sec" typeof="SiteNavigationElement" class="visible-md visible-lg">
        <h2>Section menu</h2>
        <ul class="list-group menu list-unstyled">
        <li>
        <h3 class="wb-navcurr">Content page - Secondary menu</h3>
        <ul class="list-group menu list-unstyled">
        <li><a class="list-group-item" href="#">Item 1</a></li>
        <li><a class="list-group-item" href="#">Item 2</a></li>
        <li><a class="list-group-item" href="#">Item 3</a></li>
        <li><a class="list-group-item" href="#">Item 4</a></li>
        <li><a class="list-group-item" href="#">Item 5</a></li>
        <li><a class="list-group-item" href="#">Item 6</a></li>
        <li><a class="list-group-item" href="#">Item 7</a></li>
        <li><a class="list-group-item" href="#">Item 8</a></li>
        </ul>
        </li>
        </ul>
        </nav>