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>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s