Menu List for Dropdown Menu

[iainb...@gmail.com]

To create a dropdown menu (Kaliko webforms project) I think I'm on the right lines using Menu Tree control. But how do I implement this in the following scenario? Do I still need Container.CurrentPage.PageUrl?

<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink1">
<a class="dropdown-item" href="/about/about-us">About Us</a>
<a class="dropdown-item" href="/about/news">Latest News</a>
</div>
</li>
<ul>

[Fredrik Schultz]

If you need to render different markup depending if an item should be a dropdown or not you might do something like:

<cms:MenuList ID="TopMenu" AutoBind="True" runat="server">

    <HeaderTemplate>

        <ul class="navbar-nav ml-auto">

    </HeaderTemplate>

    <ItemTemplate>

        <asp:Panel runat="server" Visible="<%#!Container.CurrentPage.HasChildren %>">

            <li class="nav-item">

                <a href="<%#Container.CurrentPage.PageUrl %>" class="nav-link"><%#Container.CurrentPage.PageName %></a>

            </li>

        </asp:Panel>

        <asp:Panel runat="server" Visible="<%#Container.CurrentPage.HasChildren %>">

            <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink<%#Container.CurrentPage.PageId %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><%#Container.CurrentPage.PageName %></a>

                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink<%#Container.CurrentPage.PageId %>">

                    <cms:MenuList AutoBind="True" DataSource="<%#Container.CurrentPage.Children %>" runat="server">

                        <ItemTemplate>

                            <a class="dropdown-item" href="<%#Container.CurrentPage.PageUrl %>"><%#Container.CurrentPage.PageName %></a>

                        </ItemTemplate>

                    </cms:MenuList>

                </div>

            </li>

        </asp:Panel>

    </ItemTemplate>

    <FooterTemplate>

        </ul>

    </FooterTemplate>

</cms:MenuList>

There's a bit of a limitation with the above approach; it will select render path based on amount of children and not if those children actually are visible in menu. (This could be worked around by replacing HasChildren with a custom method checking children with show in menu set).

You could possibly do something similar with the MenuTree using optional rendering based on Container.CurrentPage.TreeLevel.

It's been a while since I wrote WebForms last time, so I better give a disclaimer that there might be more efficient ways to do this.

[iainb...@gmail.com]

Thanks Fredrick,
I added PageLink="<%#KalikoCMS.Configuration.SiteSettings.RootPage %>" and this works well. I also added a check to see if the PageTypeId is news, in which case I don't display the dropdown, to avoid news articles in the dropdown menu.
Iain