ASP.NET Forms Bootstrap Menu Control

UPDATE: I have closed the comments for this post. If you’d like to discuss the ASP.NET Forms Bootstrap Menu Control, please visit the GitHub repository located at: https://github.com/knight0323/aspnet-forms-bootstrap-menu


When I couldn’t find an ASP.NET Form menu control that was compatible with Bootstrap 3.1, I did what every other developer would do: I created one. Enjoy!

Here’s the HTML markup view:

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container" style="padding: 0; margin: 0;">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <jk:BootstrapMenu ID="BootstrapMenu1" runat="server">
                <Items>
                    <asp:MenuItem Text="Home" NavigateUrl="#" />
                    <asp:MenuItem Text="About" NavigateUrl="#" />
                    <asp:MenuItem Text="Contact" NavigateUrl="#" />
                    <asp:MenuItem Text="Drop Down">
                        <asp:MenuItem Text="Action" NavigateUrl="#" />
                        <asp:MenuItem Text="Another action" NavigateUrl="#" />
                        <asp:MenuItem Text="Something else here" NavigateUrl="#" />
                    </asp:MenuItem>
                    <asp:MenuItem Text="Help" NavigateUrl="#" />
                    <asp:MenuItem Text="Nothing" />
                </Items>
            </jk:BootstrapMenu>
        </div><!--/.nav-collapse -->
    </div>
</div>

Here’s the HTML markup view for using with a SiteMapDataSource:

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container" style="padding: 0; margin: 0;">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <jk:BootstrapMenu ID="BootstrapMenu2" runat="server" DataSourceId="SiteMapDataSource1" />
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        </div><!--/.nav-collapse -->
    </div>
</div>

In either case you’ll need a page directive

<%@ Register tagPrefix="jk" assembly="JK.Core.Web" namespace="JK.Core.Web.Controls" %>

Updates:

  • 2017 January 23: Closed comments to push conversation to GitHub repository.
  • 2015 January 19: Added zip file sample project for download to OneDrive.
  • 2014 August 15: Added page directive needed to use control in page markup
  • 2014 April 11: Updated to work with SiteMapDataSource
Advertisements

73 thoughts on “ASP.NET Forms Bootstrap Menu Control

    1. Hi,

      Is there anyone who can provide me a basic 3 level collapsing menu for bootstrap navbar? I don’t manage to open the third level. Can someone adapt my code to add a third level?

      1. Multi-level drop downs aren’t supported by Bootstrap. The Bootstrap team’s official stance on multi-level drop downs is:

        Not right now. I’m not convinced levels and levels of dropdowns are an ideal situation on any site or application
        Issue on Bootstrap GitHub

        The linked issue does give some insight as to why and discusses one alternative.

    1. I can get it to work with binding to a SiteMap. In the BuildItem(), change

      if (item.ChildItems.Count > 0)
      {
      writer.AddAttribute(HtmlTextWriterAttribute.Class, “dropdown”);
      }

      to

      if (item.ChildItems.Count > 0)
      {
      writer.AddAttribute(HtmlTextWriterAttribute.Class, “dropdown”);
      }
      else if (item.Selected)
      {
      writer.AddAttribute(HtmlTextWriterAttribute.Class, “active”);
      }

  1. Hey this is what I have been looking for. Can you please tell me how to use the codes to get it fully working?

      1. Hi many thanks for your help :), this is what I’m looking for. Can you explain me too? I’ll like to use it with a menu.sitemap. Many Thanks!

      2. Do you need help with installing the control, setting up the sitemap, configuring the web.config to use the sitemap, or a little of all of the above?

      3. Hi Jeremy,

        Yep, a little of all jeje, well.. Actually I have a project that use a normal ASP.NET Menu Control with sitemaps, for each role I use a different sitemap to render de Menu control, my code:

        NavigationMenu.DataSource = GetDataSource(rol, Server.MapPath(“~”));
        NavigationMenu.DataBind();

        Method:
        XmlDataSource GetDataSource(int UserRole, string ServerPath)
        {
        XmlDataSource oXmlDataSource = new XmlDataSource();
        oXmlDataSource.XPath = “siteMap/siteMapNode”;
        switch (UserRole)
        {
        case 1:
        oXmlDataSource.DataFile = ServerPath + @”/siteMaps/Administrador.sitemap”;
        break;
        ….}
        }

        My question is, how can I bind your control to the sitemaps and what method of your class I have to use.

        Many Thanks 🙂

      4. I’ve inherited the normal ASP.NET Menu control to build this control so you should be able to use the same DataSource property and DataBind method.

    1. It goes into a class file in the project.

      You can actually drag it right in if you’ve downloaded it from my site. If you use this method, you’ll need to change the namespace at the top of the file to match the project you’re working in.

      – or –

      You can add a new class to the project named BootstrapMenu.cs and copy the code in. This method will put the right namespace in for you automatically.

      I’ve also updated the post above to show the page directive tag needed.

  2. Greetings Jeremy

    I felt that I must send you a big thank you for this control. I have been grappling with combining the advantages of Bootstrap with the advantages of ASP.NET and discovered you did it for me!!! I also learned about building a class library at the same time.

    You are a prince among men!
    Again thank you, thank you, thank you!!!

  3. It does! Sweet!! Thank you so much!!!! (I know – lots of exclamation points there but this really is sa-weeet.)

  4. Nice article and idea of course. Thank You very much for share. I have been tested it for a while, but I have a little probem with second (third, …) levels of submenu. Little arrow appears next to submenu title, but after click, the subsubmenu is not showing. Is it my own fault or this feature is not available?

  5. Great Find.. I am using this control in Visual Studio 2013, 4.5 Framework, and Bootstrap 3.3.1. the control has successfully been implemented and all items work except the drop down. I added a second layer as shown above but cannot seem to get the sub-menu items to expand. I only need the one level from root and eventually want to wrap this with a custom role provider. Consider me a newbie to bootstrap so fire away if I missed something simple

  6. Nice work Jeremy.
    Now i decided implement the functionality to display bootstrap (or awesome font) icons based on attribute of sitemap node. It could be useful in my opinion.
    Greetings from Pilsen 😉

    1. I tried make it a simple way in the menuitemdatabound event:

      e.item.Text = ” ” + e.item.text

      It works, but in a class is not implemented imageUrl properties. The example below does not work:

      Protected Sub BootstrapMenu_MenuItemDataBound(sender As Object, e As MenuEventArgs) Handles BootstrapMenu.MenuItemDataBound
      If Not String.IsNullOrEmpty(e.Item.ImageUrl) Then e.Item.Text = String.Format(” “, e.Item.ImageUrl) & e.Item.Text
      End Sub

      1. Maybe just parse the title attribute? So something like title=”[[envelope]] My Mail” where [[envelope]] is the glyphicon you’d like to use? I’m thinking this way for those not using sitemaps and loading from a database for example.

    1. Check the sample page source link at the bottom of the article. First things to look for is the Register tag at the top. Second thing I would check is the installation of the class. If those are all correct, clean the solution then rebuild. If you’re still having problems after trying all that, you can throw your code on pastebin for more help.

      1. Man it still not working i did everything that you told me…. from this tag on everything is underline green… i need to make this menu responsive from a school project so i need you to help me.. if you can send this sample to my fb or my email i would appreciate that very much

      1. Thank you for reply. I applied and using it. I want to thank you on call. If possible.
        One more thing in this menu user needs to click on menu and then the dropdown is open. Is it possible to expand the dropdown on hover?

      2. I’ve never had to set up the bootstrap menu that way so I don’t know off the top of my head. I can look into it and get back to you if you’d like.

      3. Thats great! One more school of thought is that can we make bootstrap accordion menu read from web.Sitemap?

  7. Hi Jeremy, I am trying to add menu item programmatically at Page_Load but it does not work:

    protected void Page_Load(object sender, EventArgs e)
    {
    if (!Page.IsPostBack)
    {
    MenuItem menuItem = new MenuItem(“Test”);
    bmMenu.Items.Add(menuItem);
    }
    }

    Nothing is added. Any tips why?

      1. at Site.Master I have

        Now I want to be able to add menu programmatically so at page_load I have:

        protected void Page_Load(Object sender, EventArgs e)
        {
        if (!IsPostBack)
        {
        MenuItem menuItem = bmMenu.Items[0];
        MenuItem subMenuItem = new MenuItem(“New Category”);
        menuItem.ChildItems.AddAt(0, subMenuItem);
        }
        }

        it returns index out of range error.

        If the normal ASP.Net Menu control is inherited, it should work right?

        Can you please help?

  8. submenu items not showing up from the example given. Any idea why? A, using visual studio express 2013 and latest bootstrap library. Literally downloaded and run the project, didn’t change anything.

  9. Cant believe it took me sooooo long to find this thread. Jeremy, your article is perfect and saved me countless headaches. Thank you!

  10. I did with the codeplex code and at runtime;

    Parser Error Message: Could not load file or assembly ‘DL.Core.Web’ or one of its dependencies. The system cannot find the file specified.

    1. Definitely! I actually don’t think I’ve used it outside of a master page in any of my production projects. I’ll look at doing a master page example. I’ll also look at cleaning up the IDs.

      1. so then help me our, theres quite a small error with my son.
        I did exactly as written and even re visited codeplex to make sure but seems the SamplePageSource in my project has some errors.

        I use sitemapDataSource and when i this piece of code <jk:BootstrapMenu ID … is underlined with a green color. And says Element jk is not known….

        my directive code

        and menu code

        Toggle navigation

        i even included the directive in web.config but still #$%^..

      2. I’d take another look at the <%@ Register tagPrefix="jk" assembly="JK.Core.Web" namespace="JK.Core.Web.Controls" %>. The ‘tagPrefix’ can be whatever you want. If you want to use tagPrefix=”custom” then your code would just look like custom:BootstrapMenu.

        The assembly is where you put the class file. If you put the class file in the a project called “MyProject” the default assembly name will be “MyProject”.

        The namespace will be in the class file itself. If you’re using the one off of my blog it’s “JK.Core.Web.Controls” and if you got it directly from the codeplex site it’s “DL.Core.Web.Controls”.

      3. Hi Jeremy, I downloaded the code and works! I’m trying to do this on a exists web application, but I get the error “server label unknow: bootstrap:BootstrapMenu”..

        I have not a project, I have a “Web Site”, how should I reference the assembly?

        Thanks a lot!

  11. I implemented the control but it keeps rendering the default html instead of the bootstrap implementation. I realy don’t get it, I added a constructor to the control to make sure the control is instantiated and it does. But the render methods aren’t being called.
    Any idea? thanks

      1. Great thanks! It’s very basic usage I guess: http://pastebin.com/bCg1U2Wb

        I don’t understand why the Render methods are not being called, but it does render html (how is that even possible!?)
        Also when I create a new web project and add the control the control works perfectly, so something in the project is messing with the rendering… Maybe it thinks its in designmode or something like that?

  12. Hi Jeremy:

    is there anyway solution to make the dynamic sidebar work in master page?
    i’m using ASP for my page, and the sidebar will only get data from table of sql server 2012.
    Any solution for this? thank you.

  13. Hi Jeremy~

    Thank you for sharing this component. it works great.
    I’m using multi level sitemap but I don’t know how to make it with this component.
    pls advise.

    Many thanks

  14. Your control looks intriguing, however I am somewhat of a novice with coding. I have a “WEB SITE” not “project”. I have created the class file “Menu.vb” in the App_Code directory. The namespace in the Menu.bc file is labeled ” FormsBootstrap”. I am not able to get the page directive to work. Can you please provide some guidance with the page directive syntax? The assembly portion of the directive seems to indicate that a dll file is needed? Am I missing a dll file somewhere?

    Thanks

    1. It’s been a long time since I worked with a website instead of a project but my suggestion would be to try and get the control on the toolbox. If I remember correctly, the drag and drop functionality should wire up everything correctly at that point.

  15. Hi Jeremy,

    Many thanks for your control! It was exactly what I looking for, however I can’t seem to get it working with a site map. I can only get the top level to appear. The site map provided with the download/example appears empty…

    When I use the following sitemap…

    with the following markup…

    … my menu only displays “TopNode1” and “TopNode2” with no dropdowns. Can you please advise?

    Thanks!

      1. Hi Jeremy, thanks for your reply. I’ve tried that with no luck. I’ve created a small sample project that illustrates the problem. It has your bootstrap menu on top of the regular asp menu. The asp menu has the sub items but the bootstrap menu does not. Could I send it to you to take a look? I love what you’ve done and I’d really like to get it working!

  16. Had to make a few corrections….in addition there is no accommodation for one of the most important features….security trimming!!

    1. Share your corrections so I can review and add them in if needed. I’d have to look at your code to see what you’re doing but sitemap binding and security trimming has been confirmed to work by multiple people.

Comments are closed.