How to display <asp:Menu> as bootstrap navbar

Question

I'm developing an ASP.Net application and I had a Bootstrap navbar setup as follows:

Site.Master

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
                Home
            </asp:HyperLink>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a runat="server" href="~/Page_1">Page 1</a>
                </li>
                <li>
                    <a runat="server" href="~/Page_2">Personal Details</a>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        Page 3 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a runat="server" href="~/Page_3/Page_3A">Page 3A</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a runat="server" href="~/Page_3/Page_3B">Page 3B</a></li>
                        <li><a runat="server" href="~/Page_3/Page_3C">Page 3C</a></li>
                        <li><a runat="server" href="~/Page_3/Page_3D">Page 3D</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a runat="server" href="~/Page_3/Page_3E">Page 3E</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Now I want to convert this into using a sitemap and keep the Bootstrap layout. So I have the following sitemap code and updated master page:

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode roles="*">
        <siteMapNode url="~/Page_1" title="Page 1"  description="Page 1" />
        <siteMapNode url="~/Page_2" title="Page 2"  description="Page 2" />
        <siteMapNode url="~/Page_3/Default" title="Page 3"  description="Page 3">
            <siteMapNode url="~/Page_3/Page_3A" title="Page 3A"  description="Page 3A" />
            <siteMapNode url="~/Page_3/Page_3B" title="Page 3B"  description="Page 3B" />
            <siteMapNode url="~/Page_3/Page_3C" title="Page 3C"  description="Page 3C" />
            <siteMapNode url="~/Page_3/Page_3D" title="Page 3D"  description="Page 3D" />
            <siteMapNode url="~/Page_3/Page_3E" title="Page 3E"  description="Page 3E" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Site.Master

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
                Home
            </asp:HyperLink>
        </div>

        <div class="navbar-collapse collapse">
            <asp:Menu ID="mnuMain" Runat="server" DataSourceID="smdsMain"
                Orientation="Horizontal" 
                StaticDisplayLevels="2" >
              </asp:Menu>

            <asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
        </div>
    </div>
</div>

My sitemap functions but the layout of my navbar is completely broken now. How can I resolve this problem?

I want to implement the standard Bootstrap navbar with a sitemap.

Loupgarou

I'm not sure if the Menu control even generates the correct markup for a Bootstrap navbar, but you probably want to start with Using CSS and Styles with the Menu Control – Welcome

Answer 1

I don't need drop down lists anymore and found a solution. It could be improved to cater for drop downs though.

I had to use a <asp:Repeater>. Like this:

<ul class="nav navbar-nav">
    <asp:Repeater runat="server" ID="rptMenu" DataSourceID="smdsMain">
        <ItemTemplate>
            <li>
                <a runat="server" href='<%# Eval("Url") %>'><%# Eval("Title") %></a>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

<asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />

Glad I finally got something that works. Best part is you don't need to change the CSS to cater for it.

Loupgarou

Answer 2

I have used Bootstrap 3.x together with ASP menu for a long time, works fine. Just updated to Bootstrap 4.x, and needed to update the menu, the following works for me:

        <nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="/">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <asp:Menu ID="MainMenu" runat="server" Orientation="horizontal" CssClass="navbar-nav mr-auto" StaticMenuStyle-CssClass="nav-item" StaticSelectedStyle-CssClass="nav-item" StaticSubMenuIndent="16px" DynamicMenuStyle-CssClass="nav-item dropdown-menu" RenderingMode="List" role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" >

                <LevelMenuItemStyles>
                    <asp:MenuItemStyle CssClass="dropdown-item" HorizontalPadding="15px" Height="50px" VerticalPadding="15px" />
                </LevelMenuItemStyles>
                <LevelSelectedStyles>
                    <asp:MenuItemStyle CssClass="nav-item active" Font-Underline="False" />
                </LevelSelectedStyles>
                <StaticHoverStyle Font-Underline="true" />
                <StaticSelectedStyle Font-Bold="true"   />
            <DynamicMenuItemStyle CssClass="dropdown-item" />
        </asp:Menu>
        </div>
    </nav>

Pearliepearline

This doesn't work for me... my nav items end up stacked. – Eureka

Maybe this helps to update (role is set to menu in my example, but this needs to be navigation): <asp:Menu ID="MainMenu" runat="server" Orientation="horizontal" CssClass="navbar-nav mr-auto" StaticMenuStyle-CssClass="nav-item" StaticSelectedStyle-CssClass="nav-item" StaticSubMenuIndent="16px" DynamicMenuStyle-CssClass="nav-item dropdown-menu" RenderingMode="List" role="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> – Pearliepearline