"Drop in" replacement for default menus

[mwpowellhtx]

Hello,

Initially, I am looking for a "drop in replacement" for the default MVC5 "menu".

It is enumerated Home About Contact, using CSS (presumably) formatted <li> tags.

When I replace that with the extension method @Html.MvcSiteMap().Menu(), this outlines vertically rather than horizontally.

Also, I will be arranging hierarchical menus, with parent/children, and would like them to drop down. I did not see anything like an Expandable or Collapsible anywhere in the attributes of <mvcSiteMapNode/>.

Eventually, I will want to work on my partials and outline a side bar to the left, but for now just want to notice a "seamless", more or less, transition.

[mwpowellhtx]

For starters, does not seem to be honoring the CSS in the parent view(s):

Head:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

Body:

<div class="navbar-collapse collapse">
    @Html.MvcSiteMap().Menu();
    @Html.Partial("_LoginPartial")
</div>

Which replaced:

<ul class="nav navbar-nav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

In SiteMapNodeModelList.cshtml, I now the following; which could probably do some tweaking in there:

<ul class="nav navbar-nav">
    @foreach (var node in Model)
    {
        <li>
            @Html.DisplayFor(m => node)
            @if (node.Children.Any())
            {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

And in the clickable portion of the SiteMapNodeModel.cshtml, I now have the following; which I think is a closer approximation to the original ActionLink, but for being model-oriented instead of baked in:

    if (string.IsNullOrEmpty(Model.Description))
    {
        @Html.ActionLink(Model.Title, Model.Action, Model.Controller)
    }
    else
    {
        @Html.ActionLink(Model.Title, Model.Action, Model.Controller, new { title = Model.Description })
    }

However, this does not render the same as the "original" code. For the moment, it's one too many moving parts getting a handle on the site map itself, apart from the style classes.

[mwpowellhtx]

Sort of halfway there. In the MenuHelperModel.cshtml, ...

Apparently I am looking at an old version of the NuGet package.

Still want to support multiple top-level nodes; or at minimum can I inherit from the default provider to customize this behavior for the time being?

Any idea when these sorts of details will be released?

Thank you...

[NightOwl888]

The default templates are designed to work with the default MVC 3/4/5 themes (at least if you get the latest version of MvcSiteMapProvider.Web - NuGet fails us again as it doesn't grab the latest version by default).

You have 4 options for changing the HTML helper output:

1. Use one of the overloads to change the behavior of the HTML helper.
2. Customize the default templates in the /Views/Shared/DisplayTemplates/ folder.
3. Create named templates as described here.
4. Build custom HTML helpers - example.

You might also want to have a look at this post for some ideas about using MvcSiteMapProvider with Bootstrap 3.

The idea of the templates was to give the user of the packages ultimate control over the HTML, but if the defaults could be tweaked to be better in some way, contributions are welcome.