Developer forum

Ah, for one page navigation item... And not page. Now I understand.

You cannot currently without customisation. So yes, a custom navigation block is the way to go. Also remember that you can use Razor templates instead. Below an example that creates a megamenu for bootstrap templates:

@{
                        var navigationSettingsMain = new Dynamicweb.Frontend.Navigation.NavigationSettings()
                        {
                            StartLevel = 1,
                            StopLevel = 3,
                            ExpandMode = Dynamicweb.Frontend.Navigation.ExpandMode.All
                        };

                        NavigationTreeViewModel navigation = GetNavigation(navigationSettingsMain);

                    }
                    <ul class="collapse navbar-collapse navbar-nav" id="navbarNavAltMarkup">
                        @foreach (NavigationTreeNodeViewModel node in navigation.Nodes)
                        {
                            string classes = string.Empty;
                            if (node.InPath)
                            {
                                classes = "current-menu-item";
                            }
                            <li class="nav-item dropdown megamenu-li @classes">

                                @if (node.Nodes.Any())
                                {
                                    int megaMenuSetting_MaxColumns = 6;
                                    bool megaMenuSetting_ShowParagraph = true;
                                    bool megaMenuSetting_RepeatMasterWhenNoChildren = true;
                                    int megaMenuColumns = 1;
                                    <a href="@node.Link" class="text-reset dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@node.Name</a>
                                    <div class="dropdown-menu megamenu rounded-0 border-bottom pb-3 shadow" aria-labelledby="navbarDropdown">
                                        <div class="row">
                                            @foreach (var subnode in node.Nodes)
                                            {
                                                if (megaMenuColumns > megaMenuSetting_MaxColumns) { break; } //Never show more than 5 columns
                                                <div class="col">

                                                    <a href="@subnode.Link" class="text-decoration-none">
                                                        <h5 class="text-uppercase font-size-sm text-dark border-bottom pb-2">@subnode.Name</h5>
                                                    </a>
                                                    @if (subnode.Nodes.Any())
                                                    {
                                                        foreach (var subsubnode in subnode.Nodes)
                                                        {
                                                            <a class="d-block w-100 text-nowrap py-2 m-n2 px-2 font-size-sm text-decoration-none text-secondary" href="@subsubnode.Link">@subsubnode.Name</a>
                                                        }
                                                    }
                                                    else if (megaMenuSetting_RepeatMasterWhenNoChildren)
                                                    {
                                                        <a class="d-block w-100 text-nowrap py-2 m-n2 px-2 font-size-sm text-decoration-none text-secondary" href="@subnode.Link">@subnode.Name</a>
                                                    }
                                                </div>
                                                megaMenuColumns++;
                                            }
                                            @if (megaMenuSetting_ShowParagraph)
                                            {
                                                <div class="col">
                                                    <h5>Paragraph</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                                    <img src="/Admin/Public/GetImage.ashx?Image=%2fFiles%2fImages%2fBikes%2fmtb1.jpg&Format=webp&Width=250" alt="..." style="width: 100%;">
                                                </div>
                                            }
                                        </div>
                                    </div>
                                }
                                else
                                {
                                    <a href="@node.Link" class="text-reset">@node.Name</a>
                                }
                            </li>
                        }