Sélection de la langue

Secondary Menu

Cette page n'est pas disponible en version française présentement.

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Provides an interactive secondary menu.

Design and coding

Basic use

Default

Use to highlight new or updated items with a simple grey numeric, or blue button-like badge.

Appearance
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>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date de modification: