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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<nav class="sc-nav-menu nav-238cab54 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>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free