Create a simple bootstrap navigation menu using content search web part in SharePoint 2013
Check out Best Alternative to InfoPath -> Try Now
This SharePoint 2013 tutorial explains, 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 in SharePoint 2013/2016.
Authoring Site collection allows authors to manage their website content while the Publishing Site collection reviews the content from the authoring site collection.
Also read: Cross site publishing in SharePoint 2013
Open the Authoring site collection. Create a list named “menu” that contains the title and page URL. The list columns will look like below:
Let’s go and create 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.
Now, let’s create a two display template for display a bootstrap carousel menu control and menu item
Code – Menu Control Template
Create a bootstrap navigation menu in SharePoint
Upload the script and CSS into the SharePoint style library.
Add the scripts and CSS into the 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 the 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.
Now, let’s go to the SharePoint page. Add a Content Search Webpart into this page.
Map a search query to get the result from the authoring site collection. Click edit web part-> change query.
Provide a number of items to display.
Choose the display templates.
Click OK. Under the property mapping section, map the managed properties of the title, image description, and Image.
Click OK to complete the setup.
There is the final result.
The result has been displayed. Using search service, you need to run the search service application. After adding the content to the SharePoint list, the results will be successfully displayed on the page.
Download Menu.zip file from here.
You may like following SharePoint tutorials:
- Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
- SharePoint Online communication site Hero webpart
- Promoted links web part in SharePoint Online
- Show SharePoint list view data in accordion view using jslink
- Create and configure metadata navigation and filtering for list or library in SharePoint Online
- Different Types of Navigation in SharePoint 2013/2016/Online
- Configure the app environment and create an app in SharePoint server 2013
- Image rendition in SharePoint 2013 tutorial
- Create a responsive navigation menu using managed metadata in SharePoint 2013/2016
- jQuery News Ticker using content search web part in SharePoint 2013
- Create a chart using chart.js in SharePoint Server 2013/2016
- JQuery accordion using content search web part in SharePoint server 2013
- Bind SharePoint list data using jQuery datatable using content search web part in SharePoint
I hope this will be helpful to create a simple bootstrap navigation menu using the content search web part in SharePoint 2013/2106.
SharePoint Online FREE Training
JOIN a FREE SharePoint Video Course (3 Part Video Series)
