# Menu

- Documentation
- Questions or comments?

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

### Code

#### In-page HTML

    <nav role="navigation" id="wb-sm" data-ajax-replace="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>

#### menu-include-en.html

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

Date modified:
  2017-06-12