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: