Using MvcSiteMapProvider with Twitter Bootstrap

<a href=”http://nuget.org/packages/MvcSiteMapProvider“>MvcSiteMapProvider</a> provides an easy way to add Sitemap functionality to your MVC application. One very nice thing is that integrating it with Twitter’s Bootstrap UI framework is child’s play (assuming the child in question has a decent background in .NET web-programming of course).

Once you have NuGet’ed both the sitemap provider and Bootstrap, and defined your sitemap XML file, you will typically add the following code to your master page to render the menu into the output HTML.

@Html.MvcSiteMap().Menu()

However, Bootstrap expects the HTML elements to use certain classes (e.g. “nav nav-pills”) which, by default, MvcSiteMapProvider will not do.

You can fix this easily by modifying the following template:

Views\Shared\DisplayTemplates\MenuHelperModel.ascx

to include all the necessary CSS classes.

Edited template

<!-- Edited to work with Twitter Bootstrap by adding 'nav' and 'nav-pills' classes. -->
<ul class="nav nav-pills">
<% foreach (var node in Model.Nodes) { %>
    <!-- Edited to work with bootstrap by adding 'active' class for current node. -->
    <li class='<%= node.IsCurrentNode ? "active" : string.Empty %>'><%=Html.DisplayFor(m => node)%>
    <% if (node.Children.Any()) { %>
        <%=Html.DisplayFor(m => node.Children)%>
    <% } %>
    </li>
<% } %>
</ul>