Create a responsive navigation menu using managed metadata in SharePoint 2013/2016

This SharePoint customization tutorial, I will explain, how to create a responsive navigation menu in SharePoint server 2013 using managed metadata.

Before starting make sure that you have to create Managed Metadata Service Application in SharePoint 2013/2016.

Create responsive navigation menu using managed metadata in SharePoint

Open SharePoint site and Navigate to site settings -> Navigation -> Under look and feel -> Navigation.

On that page select “Managed Navigation” like below:

SharePoint 2013 responsive navigation menu

Under Managed Navigation Term set -> Click Create Termset button.

SharePoint 2016 responsive navigation menu

So now the site navigation has been created successfully “Publishing Navigation”. Open the “Term store management tool” it will help you to create the terms and term sets for managed navigation.

On Publishing navigation click “Create Term”.

SharePoint 2019 responsive navigation menu

Then create all the links you want to show on the page.

  • Home
  • About us
  • Gallery
  • Blog
  • Contact us

These are all the term sets we are going to create, Finally, the created term sets look like this.

SharePoint online responsive navigation menu

Click Save -> Click Ok. Now the page looks like this.

SharePoint 2013 responsive navigation menu managed metadata

Let’s gets some work around here to get branding for the navigation menu and make responsive
HTML responsive navigation menu looks like this:

Browser View:

SharePoint 2016 responsive navigation menu managed metadata

Mobile View:

SharePoint 2019 responsive navigation menu managed metadata

Open SharePoint designer 2013 and then add the scripts and CSS under the site assets folder.

SharePoint online responsive navigation menu managed metadata

Then open the site collection using SharePoint designer 2013 -> Navigate to master page -> Open Seattle. Master -> Edit this file in advance mode

Add the necessary scripts and CSS into the master page.

<link rel="stylesheet" type="text/css" href="../../SiteAssets/menu/bootstrap.min.css" />
<script type="text/javascript" src="../../SiteAssets/menu/jquery.min.js" />
<script type="text/javascript" src="../../SiteAssets/menu/bootstrap.min.js" />
create navigation menu managed metadata sharepoint

HTML Code look like this:

<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>

Ctrl + find the “aspmenu” and Add nav class tag into top of the sharepoint delegate tag

Code look like:

<nav class="navbar navbar-inverse">
<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
runat="server"
StartingNodeUrl="sid:1002″/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2″
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2″
SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</nav>

End of the <body> tag add some scripts to override the default ID and Class for sharepoint <ul> and <li> elements

For Sharepoint onpremise:

UI id:
$( "#zz13_RootAspMenu").attr( "id", "myTopNav" );
For anonymous user:
$( "#zz2_RootAspMenu").attr( "id", "myTopNav" );
For sharepoint online
$( "#zz13_RootAspMenu").attr( "id", "myTopNav" );

In my scenario am using sharepoint onpremise. Add the script tag to override the ul class.

create navigation menu managed metadata sharepoint 2013
First step set the custom id for the <ul> tag
$( "#zz13_RootAspMenu" ).attr( "id", "main-menu" );
Now inspect and check the <ul> tag id
create navigation menu managed metadata sharepoint 2016
<script type="text/javascript">

// Replace that pesky automatic ul ID
$( "#zz13_RootAspMenu" ).attr( "id", "main-menu" ); // set the replace the id for default sharepoint Id
$("#main-menu"). attr("class","nav navbar-nav"); // set the class for <ul> element replacing the system css

$("#main-menu li").attr("class","");
$("#main-menu a").attr("class","");
</script>

Check-in the master page file and refresh the browser you will be able to see the responsive navigation menu.

create navigation menu managed metadata sharepoint 2019
create navigation menu managed metadata sharepoint online

Note:- It is applicable to all types of navigation structural navigation also works well….

You may like following SharePoint tutorials:

This SharePoint tutorial, we learned how to create a responsive navigation menu using managed metadata in SharePoint 2013/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Vinodh Narayanan

>