---
{
	"title": "Heading With List",
	"language": "en",
	"tag": "menu",
	"parentdir": "menu",
	"parentPage": "Footer Menu Integration",
	"parentPageURL": "footer-menu",
	"altLangPrefix": "footer-menu-list",
	"altFooter": "../ajax/footer-menu-list",
	"dateModified": "2018-08-06"
}
---
<span class="wb-prettify all-pre hide"></span>
		<section>
			<h2>Purpose</h2>
			<p>Use a heading followed by a list when multiple links need to be displayed. In the menu panel, this is rendered as a <code>&lt;details&gt;</code> element, with the heading as a summary.</p>
		</section>

		<section>
			<h2>Code</h2>
				<pre><code>&lt;footer role="contentinfo" id="wb-info" class="visible-sm visible-md visible-lg wb-navcurr"&gt;
	&lt;div class="container"&gt;
		&lt;nav role="navigation" class="row"&gt;
			&lt;h2&gt;Example Footer&lt;/h2&gt;
			&lt;section class="col-sm-4"&gt;
				&lt;h3&gt;Heading 1&lt;/h3&gt;
				&lt;ul class="list-unstyled"&gt;
					&lt;li&gt;&lt;a href="#"&gt;List Element 1.1&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;List Element 1.2&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/section&gt;
			&lt;section class="col-sm-4"&gt;
				&lt;h3&gt;Heading 2&lt;/h3&gt;
				&lt;ul class="list-unstyled"&gt;
					&lt;li&gt;&lt;a href="#"&gt;List Element 2.1&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;List Element 2.2&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/section&gt;
			&lt;section class="col-sm-4"&gt;
				&lt;h3&gt;Heading 3&lt;/h3&gt;
				&lt;ul class="list-unstyled"&gt;
					&lt;li&gt;&lt;a href="#"&gt;List Element 3.1&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;List Element 3.2&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/section&gt;
		&lt;/nav&gt;
	&lt;/div&gt;
&lt;/footer&gt;</code></pre>
		</section>
