Question

I’d like to be able to add a separator bar in my menu which is created using MvcSiteMap library.

The mvcSiteMapNodes resolve to <li></li> items with the action method inside.
However, I would like just a dummy <li class="divider"></li> node which renders a divider item in my menu.

e.g.

<mvcSiteMapNode title="Admin" url="#admin" roles="Admin">
  <mvcSiteMapNode title="Edit Users" controller="User" action="Users" roles="Admin" />      
  <mvcSiteMapNode class="divider"  />
  <mvcSiteMapNode title="User Audit" controller="User" action="Audit" roles="Admin" />      
</mvcSiteMapNode>

Does anyone know how this can be achieved?

Answer 1

The best way to handle this is to put the separator sitemap node in your xml sitemap file and set the clickable attribute to false. If it wants a controller and/or action then make one up specifically for a separator.

Then create your own templates for rendering the menu. Within the templates you can examine the node model and put what ever html attributes you want in the rendered result. So if the sitemap node clickable attribute is false you can insert a string in the html class attribute and have your css style it however you like.

See the “Customizing rendered output” section at this url : https://github.com/maartenba/MvcSiteMapProvider/wiki/HtmlHelper-functions

<%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl<MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModel>" %>
<%@ Import Namespace="System.Web.Mvc.Html" %>

<% if (Model.IsCurrentNode && Model.SourceMetadata["HtmlHelper"].ToString() != "MvcSiteMapProvider.Web.Html.MenuHelper")  { %>
    <%=Model.Title %>
<% } else if (Model.IsClickable) { %>
<a href="<%=Model.Url %>"><%=Model.Title %></a>
<% } else { %>
<%=Model.Title %>
<% } %>