Create a simple bootstrap navigation menu using content search web part in SharePoint 2013

Create a simple bootstrap navigation menu using content search web part in SharePoint 2013

In this article, I have explained how to create a bootstrap navigation menu bar using the content search web part in SharePoint 2013.
In the first step, let’s create the authoring and publishing site collection.

Authoring Site collection allows authors to manage their website content while the Publishing Site collection reviews the content from the authoring site collection.

Open the Authoring site collection. Create a list named “menu” that contains title and page URL. The list columns will look like below:

Create a simple bootstrap navigation menu using content search web part in SharePoint 2013
Create a simple bootstrap navigation menu using content search web part in SharePoint 2013

Let’s go and create a control and a template to display the items.

Control Template: It provides the overall structure (layout) of the HTML elements along with start and end tags.
Item Template: It renders the items from the list, and contains text and pictures.

Also read:

Cross site publishing in SharePoint 2013

Now, let’s create a two display templates for display a bootstrap carousel menu control and menu item

Code – Menu Control Template

Upload the script and CSS into style library.

sharepoint 2013 bootstrap menu 1
sharepoint 2013 bootstrap menu 1

Add the scripts and css in to control template.
<script>
$includeCSS(this.url, “~sitecollection/Style%20Library/Menu/bootstrap.min.css”);
$includeScript(this.url, “~sitecollection/Style%20Library/Menu/bootstrap.min.js”);
$includeScript(this.url, “~sitecollection/Style%20Library/Menu/jquery.min.js”);
</script>
Now, I am going to define the HTML layout to the Control Template.
<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>Csharpcorner </a>
</div>
<ul class=”nav navbar-nav”>
_#= ctx.RenderItems(ctx) =#_
</ul>
</div>
</nav>
The full code looks like the following.
<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″>
<head>
<title>MenuControl</title>

<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt=”string”>Display a menu Item</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt=”string”>0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt=”string”>;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt=”string”>1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt=”string”>True</mso:HtmlDesignConversionSucceeded>
<mso:CrawlerXSLFile msdt:dt=”string”></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt=”string”></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignStatusAndPreview msdt:dt=”string”>http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>

<body>
<script>
$includeCSS(this.url, “~sitecollection/Style%20Library/Menu/bootstrap.min.css”);
$includeScript(this.url, “~sitecollection/Style%20Library/Menu/bootstrap.min.js”);
$includeScript(this.url, “~sitecollection/Style%20Library/Menu/jquery.min.js”);

</script>

<div>
<!–#_if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return “”;}
ctx.ListDataJSONGroupsKey = “ResultTables”;
ctx[“CurrentItems”] = ctx.ListData.ResultTables[0].ResultRows;
var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

AddPostRenderCallback(ctx, function() {
$.getScript(siteURL + “”);

});
_#–>

<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>WebSiteName</a>
</div>
<ul class=”nav navbar-nav”>

_#= ctx.RenderItems(ctx) =#_

</ul>
</div>
</nav>
</div>
</body>
</html>
Let’s go to Item template and declare the managed properties and necessary variables.
<!–#_
var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
var itemIdx = ctx.CurrentItemIdx+1;
var title = $getItemValue(ctx, “Title”);
var getURL = $getItemValue(ctx, “PageURL”);

var esActive =””;

if(itemIdx == 1)
esActive = “active”;

_#–>

Render the HTML structure with the list item information.
<li class=”_#= esActive =#_”>
<a href=”_#= getURL =#_”>_#= title =#_</a>
</li>
Overall Item template code looks like the following.
<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>MenuItem</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt=”string”>Displays an Menu Item.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt=”string”>0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt=”string”>;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt=”string”>1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt=”string”>’Title’:’Title’,’PageURL’:’PageURL'</mso:ManagedPropertyMapping>
<mso:CrawlerXSLFile msdt:dt=”string”></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt=”string”></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt=”string”>True</mso:HtmlDesignConversionSucceeded>

<mso:HtmlDesignStatusAndPreview msdt:dt=”string”>http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/BannerItem.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>

<body>
<div>
<!–#_
var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
var itemIdx = ctx.CurrentItemIdx+1;
var title = $getItemValue(ctx, “Title”);
var getURL = $getItemValue(ctx, “PageURL”);

var esActive =””;

if(itemIdx == 1)
esActive = “active”;

_#–>

<!— HTML Goes Here –>

<li class=”_#= esActive =#_”>
<a href=”_#= getURL =#_”>_#= title =#_</a>
</li>

</div>
</body>
</html>

Upload the display template under Site settings -> Master page and page layouts -> Display Templates -> Content Web Parts.

bootstrap menu SharePoint online
bootstrap menu SharePoint online

Now, let’s go to SharePoint page. Add a Content Search Webpart into this page.

bootstrap menu SharePoint online office 365
bootstrap menu SharePoint online office 365

Map a search query to get the result from the authoring site collection. Click edit web part-> change query.

bootstrap menu SharePoint online office 365 1
bootstrap menu SharePoint online office 365 1

Provide number of items to display.

bootstrap menu SharePoint online office 365 2
bootstrap menu SharePoint online office 365 2

Choose the display templates.

Click OK. Under the property mapping section, map the managed properties of the title, image description, and Image.

bootstrap menu SharePoint online office 365 4
bootstrap menu SharePoint online office 365 4

Click OK to complete the setup.

There is the final result.

bootstrap menu SharePoint online office 365 5
bootstrap menu SharePoint online office 365 5

The result has been displayed. Using search service, you need to run the search service application. After adding the content into the SharePoint list, the results will be successfully displayed on the page.


Download Menu.zip file from here.

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →