MvcSiteMapProvider - Enhanced bootstrap dropdown menu

Question

I'm trying to build a menu like this:

For reference I'm using this library https://github.com/behigh/bootstrap_dropdowns_enhancement

@Html.MvcSiteMap().Menu("BootstrapMenuHelperModel")

@model MenuHelperModel

<nav class="navbar" role="navigation">
    <div class="container-fluid menu-container">
        <div class="collapse navbar-collapse">
            <div class="navbar-header">
                <span class="navbar-brand">FAR BACKOFFICE</span>
            </div>
            <ul class="nav nav-pills">
                @foreach (var node in Model.Nodes)
                {
                    if (node.Descendants.Any())
                    {
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">@node.Title <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                @foreach (var descendant in node.Descendants)
                                {
                                    if (descendant.Descendants.Any())
                                    {
                                        <li role="presentation" class="dropdown-submenu">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">@descendant.Title</a>
                                            <ul class="dropdown-menu">
                                                @foreach (var descendant2 in descendant.Descendants)
                                                {
                                                    <li role="presentation">@Html.ActionLink(descendant2.Title, descendant2.Action, descendant2.Controller)</li>
                                                }
                                            </ul>
                                        </li>
                                    }
                                    else
                                    {
                                        <li role="presentation">@Html.ActionLink(descendant.Title, descendant.Action, descendant.Controller)</li>
                                    }
                                }
                            </ul>
                        </li>
                    }
                    else
                    {
                        <li role="presentation">@Html.ActionLink(node.Title, node.Action, node.Controller)</li>
                    }
                }                
            </ul>
        </div>
    </div>
</nav>

My controllers

[MvcSiteMapNode(Title = "Assembleia", ParentKey = "Home", Key = "Assembleia", Clickable = false, Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
    public class AssembleiaController : Controller { }

    [Route("Assembleia/Comunicado")]
    [MvcSiteMapNode(Title = "Comunicado", ParentKey = "Assembleia", Key = "AssembleiaComunicado", Clickable = false, Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
    public class AssembleiaComunicadoController : AssembleiaController
    {        
        [Route("Assembleia/Comunicado/Enviar")]
        [MvcSiteMapNode(Title = "Enviar", ParentKey = "AssembleiaComunicado", Key = "AssembleiaComunicadoEnviar", Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
        public ActionResult Enviar()
        {
            return View();
        }

        [HttpGet]
        [Route("Assembleia/Comunicado/Consultar")]
        [MvcSiteMapNode(Title = "Consultar", ParentKey = "AssembleiaComunicado", Key = "AssembleiaComunicadoConsultar", Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
        public ActionResult Consultar()
        {
            return View();
        }
    }

As a result I'm getting a strange and unkwon behavior

What's going wrong?

Also asked on GitHub

Answer 1

node.Descendants should be node.Children

Learn the difference on Descendants and Children here, CSS Child vs Descendant selectors (Never mind the post beeing about CSS, this is a generic pattern)