using MVC Navigation Routes in Twitter.Bootstrap.MVC4

One of the features that the Twitter.Bootstrap.MVC4 nuget package provides is a simple route based menu system.  By adding explicit routes to your application you can control, the top menu for your application.

To learn more about the Package read these blog posts:

The concept is pretty simple, create some routes in a specific way, and your menu will light up in the application.  The recent release of the package also supports creating submenus. It was the most requested feature on the initial release. I will walk through the code that is provided using the Sample nuget package.  The first piece to look at is the Route Registration.

image

The code here creates to menu items: Automatic Scaffolding and Example Layouts.  The second menu item then has three child menu items.  The code is pretty simple, there are a number of defaults that happen under the hood, but the thing to know is that we are using the built in Routes from asp.net

 

image

You can see the menu highlights the Example Layouts as I hover over it and show the child menu items. This menu system is pretty basic but it covers most of the use cases with the support for child menus.

 

To use the Twitter.Bootstrap.MVC4 package. just install it from nuget into a new MVC4 Empty project  template. And you can see the code working for yourself.

install-package Twitter.Bootstrap.Mvc4.sample

 

The menu system also support a filter concept which you can use to show and hide specific items based on the request context. Think about using this for an authenticated users versus an anonymous user.  Another use case would be to show and hide items for a user with a specific role.  I will show how to use this feature in the next blog post.

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Eric Hexter

I am the CTO for QuarterSpot. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I co-founded online events like mvcConf, aspConf, and Community for MVC. I am also a Microsoft MVP in ASP.Net.
This entry was posted in .Net, Asp.Net, Asp.Net MVC, Bootstrap.mvc, Open Source Software, OSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • AlexandreJobin

    great… i really like the idea and i will study it to use it in my projects. I will continue to follow you!!

    • erichexter

      Thanks for the feedback that you find it interesting!

  • Derek

    Are there any samples  or documentation on the menu filtering mentioned?  The authenticated vs anonymous user filtering is exactly what I’m looking to do.  

  • David

    Nice! Are there VB versions of ControlGroupExtensions.cs and ViewHelperExtensions.s available?

    • erichexter

      There are not vb versions at this time. The project is open source, so you could contribute that if you are interested in supporting that..

  • Rob D.

    looks great. can it support MVC Areas?

    • erichexter

      you just need to specify the layout in the viewstart file in your areas views folder.

      • Rob D.

        So, if I had an Area called Admin with a default controller called Main, would this work?
        routes.MapNavigationRoute(“Admin”, c=>c.Index());

        • erichexter

          That should work, the helper method will create the route and include the full namespace of the class to ensure the route can located the controller class correctly.. If it does not work, submit an issue on the github project and I will make sure it is taken care of.

          • Mark Lawson

            I have a similar problem and using the above example the AREA name does not get created as part of the HREF so i end up with /main, rather than /admin/main

          • erichexter

            There is a sample on the gitub site in the issues list and we have a pending pull request to make this work more smoothly.

            Eric Hexter

            blog | http://Hex.LosTechies.com
            info | http://www.linkedin.com/in/erichexter

  • krishna

    it’s ok   when click menu icon the items are displayed but here i have one problem in that submenu’s have items that time i want chainge icon

  • Jorge Machado

    If I need a Third level of Menu it’s supported?

  • http://twitter.com/vanerleo Leonid Vaner

    can you please show how to have different nav based on roles?

  • Chris Rayl

    I’m excited to hear part two of this.

  • Robert Maurer

    This is very cool. I was playing around with it and I noticed that the Navigation menu is always at the top of the page. Is there any way to position the menu so that it comes after some image or the header? Also, can/how do I style it?

  • Jason phillips

    Is there a way to separate the navigation based on Area? Say I want home to have different navigation options than Admin

  • Karandeep

    i have an issue here in my project using the above mentioned template
    for normal user and admin i want to show different top bars
    how can we implement this??Any help?

    • erichexter

      Create a different layout for the admin and use a different instance of a route collection

      • Karandeep

        sir,i have created another layout for admin but dont know about creating new instance of route collection.can you give me some sample of code?

  • http://twitter.com/RichardHz Richard Hernandez

    Hi, I’ve just started using Twitter.Bootstrap.MVC4. I like it but there seems to be a problem with NavigationRouteConfigurationExtensions.CreateUrl. If the controller is “homecontroller” then regardless of what action is passed only the action is returned. Other then that, great.

    • Eric

      I’m running into this issue as well. Any fix?

      • http://twitter.com/RichardHz Richard Hernandez

        Hi, I wouldn’t exactly call this a fix, more a temporary work around.
        Go to the CreateUrl method, the one that takes 2 parameters and remove the else statement.

  • Tito Morais

    I am facing the problems:

    Error 4 The type or namespace name ‘NavigationRouteOptions’ could not be found (are you missing a using directive or an assembly reference?) App_StartExampleLayoutsRouteConfig.cs 21 59 ConstFed2

    • Shaban Harouna

      am getting the same error!!!

  • Amir

    That was great!
    but there are some problems when you use async Actions in your Controllers.
    if so, then you can not use lambda expression to identify the Action and you will have to use other overloads and that needs more code and more time.