Menu

Purpose

Provides an interactive menu with optional sub-menus.

Example

• Large screens: The menu is rendered in the header as a menu bar.
• Small and medium screens: The menu is rendered as a side panel, triggered by a menu button in the header, and includes the secondary menu and the footer.

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

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