Header & Footer

Navigation Menu

Display a WordPress menu, for headers or footers.

Live demo

See it in action

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<nav class="sc-nav-menu nav-82c90439 sc-nav" aria-label="Menu">
		<ul id="menu-shortcode-demo-menu" class="primary-menu primary-menu--horizontal submenu-dropdown nav-align-center" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
			<li id="menu-item-6787" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6787"><a href="https://demos.unysonplus.com/">Home</a></li>
			<li id="menu-item-6788" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6788"><a href="https://demos.unysonplus.com/shortcodes/">Shortcodes</a></li>
			<li id="menu-item-6789" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6789"><a href="#">Elements</a>
			<ul class="sub-menu">
				<li id="menu-item-6790" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6790"><a href="https://demos.unysonplus.com/shortcodes/button/">Buttons</a></li>
				<li id="menu-item-6791" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6791"><a href="https://demos.unysonplus.com/shortcodes/gallery/">Gallery</a></li>
				<li id="menu-item-6792" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6792"><a href="https://demos.unysonplus.com/shortcodes/tabs/">Tabs</a></li>
			</ul></li>
			<li id="menu-item-6793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6793"><a href="https://docs.unysonplus.com/">Docs</a></li>
		</ul>
	</nav>
</section>

To learn more about the Navigation Menu shortcode, please check out the online manual here.