Menu

Questions or comments?

Purpose

Provides an interactive menu with optional sub-menus. Implements the WAI-ARIA menu design pattern.

Working example

How to implement

  1. Add the following code to the header area of the page. Note: This step should already be done for most themes.
    • English pages:
      <nav role="navigation" id="wb-sm" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
      	<div class="container nvbar">
      		<h2>Topics menu</h2>
      		<div class="row">
      			<ul class="list-inline menu">
      				<li><a href="#">Section 1</a></li>
      				<li><a href="#">Section 2</a></li>
      				<li><a href="#">Section 3</a></li>
      			</ul>
      		</div>
      	</div>
      </nav>
    • French pages:
      <nav role="navigation" id="wb-sm" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
      	<div class="container nvbar">
      		<h2>Menu des sujets</h2>
      		<div class="row">
      			<ul class="list-inline menu">
      				<li><a href="#">Section 1</a></li>
      				<li><a href="#">Section 2</a></li>
      				<li><a href="#">Section 3</a></li>
      			</ul>
      		</div>
      	</div>
      </nav>
  2. Update the ul element with list items (li) containing the desired links.
  3. Optional: Create a full menu to AJAX in. This menu will replace the class="container" element and its descendants. Sub-menus are achieved by nesting <ul class="sm list-unstyled" id="lore" role="menu"> in each li element of the menu bar. The following is an example of a full menu:
    • English pages:
      <div class="pnl-strt container visible-md visible-lg nvbar">
      	<h2>Topics menu</h2>
      	<div class="row">
      		<ul class="list-inline menu" role="menubar">
      			<li><a href="#lore" class="item">Section 1</a>
      				<ul class="sm list-unstyled" id="lore" role="menu">
      					<li><a href="#">Item 1.1</a></li>
      					...
      				</ul>
      			</li>
      			<li><a href="#lor" class="item">Section 2</a>
      				<ul class="sm list-unstyled" id="lor" role="menu" >
      					<li><a href="#">Item 2.1</a></li>
      					...
      					<li class="slflnk"><a href="#">Section 2 - More</a></li>
      				</ul>
      			</li>
      			<li><a href="#lorm" class="item">Section 3</a>
      				<ul class="sm list-unstyled" id="lorm" role="menu" >
      					<li>
      						<details>
      							<summary>Section 3.1</summary>
      							<ul role="menu">
      								<li><a href="#">Item 3.1.1</a></li>
      								...
      							</ul>
      						</details>
      					</li>
      					...
      				</ul>
      			</li>
      		</ul>
      	</div>
      </div>
    • French pages:
      <div class="pnl-strt container visible-md visible-lg nvbar">
      	<h2>Menu des sujets</h2>
      	<div class="row">
      		<ul class="list-inline menu" role="menubar">
      			<li><a href="#lore" class="item">Section 1</a>
      				<ul class="sm list-unstyled" id="lore" role="menu">
      					<li><a href="#">Article 1.1</a></li>
      					...
      				</ul>
      			</li>
      			<li><a href="#lor" class="item">Section 2</a>
      				<ul class="sm list-unstyled" id="lor" role="menu" >
      					<li><a href="#">Article 2.1</a></li>
      					...
      					<li class="slflnk"><a href="#">Section 2 - Autre</a></li>
      				</ul>
      			</li>
      			<li><a href="#lorm" class="item">Section 3</a>
      				<ul class="sm list-unstyled" id="lorm" role="menu" >
      					<li>
      						<details>
      							<summary>Section 3.1</summary>
      							<ul role="menu">
      								<li><a href="#">Article 3.1.1</a></li>
      								...
      							</ul>
      						</details>
      					</li>
      					...
      				</ul>
      			</li>
      		</ul>
      	</div>
      </div>
  4. Optional: Add sub-sub-menus to the full menu using nested details elements.
    Warning: Sub-sub-menus significantly increase menu complexity, particularly on screen readers and mobile devices, which can create usability issues for some users.
    <ul class="sm list-unstyled" id="lorm" role="menu" >
    	<li>
    		<details>
    			<summary>Section 3.1</summary>
    			<ul role="menu">
    				<li><a href="#">Item 3.1.1</a></li>
    					...
    			</ul>
    		</details>
    	</li>
    	...
    </ul>
  5. Optional: Add data-ajax-fetch="[url]" to the element with class="wb-menu", with [url] being the URL of the full menu to AJAX in.
    <nav role="navigation" id="wb-sm" data-ajax-fetch="ajax/menu-include-en.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
  6. Optional: Update data-trgt with the id of the target element for the mobile panel (in most cases this should not change).

Configuration options

Option Description How to configure Values
data-ajax-fetch Used to AJAX in a full menu. Add data-ajax-fetch="[url]" to the element with class="wb-menu", with [url] being the URL of the full menu to AJAX in.
None (default):
Full menu is not AJAXed in.
URL
URL for the full menu to AJAX in.
data-trgt Used to identify the target for the mobile panel. Add data-trgt="mb-pnl" to the element with class="wb-menu". The value of data-trgt must match the id of the target element for the mobile panel.
String
The id of the target element (should remain mb-pnl unless that id has changed.

Events

Event Trigger What it does
wb-init.wb-menu Triggered manually (e.g., $( ".wb-menu" ).trigger( "wb-init.wb-menu" );). Used to manually initialize the menu plugin. Note: The menu plugin will be initialized automatically unless the menu markup is added after the page has already loaded.
wb-ready.wb-menu (v4.0.5+) Triggered automatically after a menu has initialized. Used to identify which menu has initialized (target of the event).
$( document ).on( "wb-ready.wb-menu", ".wb-menu", function( event, instance, settings ) {
});
$( ".wb-menu" ).on( "wb-ready.wb-menu", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing.
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Menu source code on GitHub

Date modified: