Using Mvc SiteMap Provider to generate breadcrumbs for an MVC website

TAGS: Breadcrumbs CATEGORIES: ASP.NET MVC

I've created breadcrumbs for a website in the past by using a combination of HTML, CSS and JavaScript. But when creating dynamic breadcrumbs for an ASP.NET MVC website I decided to try using MvcSiteMapProvider.

MvcSiteMapProvider is an open-source library for ASP.NET MVC which provides dynamic output of site structure, and is available on GitHub. The package can also be installed within your Visual Studio project directly through Nuget by targetting your required MVC Framework version:

Install-Package MvcSiteMapProvider.MVC5

Now the breadcrumbs can be generated and output to your site. You will notice that a file called Mvc.sitemap has been added to the root of your project, and this would contain the following for a default MVC website:

<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0"
xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0 MvcSiteMapSchema.xsd">
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="About" controller="Home" action="About"/>
<mvcSiteMapNode title="Contact Us" controller="Home" action="Contact"/>
</mvcSiteMapNode>
</mvcSiteMap>

New pages can be added to the structure by adding a new mvcSiteMapNode element. Each page starts wrapped by the Home node tag, and you can also wrap children of other nodes to match the structure of your website. 

To output the sitemap as breadcrumbs, place the following within your view where the breadcrumbs should be output:

@Html.MvcSiteMap().SiteMapPath()

This will allow you to output and customize your list of breadcrumbs. The HTML which is generated for the SiteMapPath can be customized and is located under the /Views/Shared/DisplayTemplates folder. You can either edit the helpers directly, or create your own by adding a string parameter to the above SiteMapPath call.

Using with Custom Routing

If you are using custom routing, you must specify the name of the Route within each mvcSiteMapNode of the Mvc.sitemap file. Add the value for route to match the routename like route="NewRouteName" and this will match the controller when outputting the MVC Path.

Not only can the MvcSiteMapProvider package be used for breadcrumbs, but you can also use any other element to dynamically output links from your website structure. For more information on using the MVC Sitemap Provider, check out the project wiki.

RECENT POSTS

Using Mvc SiteMap Provider to generate breadcrumbs for an MVC website

Using Mvc SiteMap Provider to generate breadcrumbs for an MVC website

Jun 16, 2017

I've created breadcrumbs for website in the past using a combination of HTML, CSS and JavaScript. But when creating dynamic Breadcrumbs for an ASP.NET MVC website I decided to use MvcSiteMapProvider.

Using the right tools to Recover old or lost data

Using the right tools to Recover old or lost data

Apr 17, 2017

The majority of most data saved today is done digitally. This can include everything from documents like PDFs, work emails or even entire databases that are stored, hosted and accessed digitally.

Optimize your images to decrease Page Load times

Optimize your images to decrease Page Load times

Dec 28, 2016

Keeping your images optimized for visitors to your website is an important task, and can have a direct effect on page load times.

Protect your Passwords: Securing login forms using SSL/TLS

Protect your Passwords: Securing login forms using SSL/TLS

Aug 11, 2016

If a website's login page allows for insecure authentication, it becomes easy to capture information by an attacker on the same network.

Control your Content: The value of Content Management Systems

Control your Content: The value of Content Management Systems

Jul 16, 2016

The business world of today: volatile, constantly evolving, and where only the most efficient and adaptable thrive.