Setting the active link in a Twitter Bootstrap Navbar in ASP.NET MVC
If you have used Twitter Bootstrap before you will probably know that it has a Navbar component so you can easily build navigation for a website. One of the features of the Navbar is being able to set which of the links within it is the currently active one, so this can displayed to the user.
As the Navbar needs to appear on every page it would be placed into your _Layout.cshtml (assuming you’re using Razor) and would look something like this
... <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Title</a> <ul class="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </div> </div> ...
So, how do you find out which is the active link and set the active class on the <li> tag? I’ve created an HtmlHelper extension method to do just that!
And it can be used like this:
...
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Title</a>
<ul class="nav">
@Html.MenuLink("Link 1","Index","Home")
@Html.MenuLink("Link 2","Index","Home")
@Html.MenuLink("Link 3","Index","Home")
@Html.MenuLink("Link 4","Index","Home")
</ul>
</div>
</div>
</div>
...
This will output a <li> tag with an anchor tag inside it and will add class=”active” to the <li> tag if it is the active one.
Note: depending on the namespace of your HtmlHelper extension class you may need to add a using statement to the top of the Razor file, such as
@using MyProject.Web.Helpers
thx man! u r the guy!
Excellent thanks!
You might also want to add that you need to add
using System.Web.Mvc.Html
to the HtmlHelpers class to get the ActionLink extension.
@Toby Jones
Thanks. I’ve added it to the gist.
Great article. Saved me a bunch of time. Thanks.
Thank you! Useful tip
This helped meh, thx!
I love you!
Nice article! Small addition: my menu is created based on user priviliges by a MenuController so I had to use “htmlHelper.ViewContext.ParentActionViewContext.RouteData”. If you have mutliple nested actions rendering you probably want to do some recursion to get the main action and controller.
cool)))
This article inspired me to add a similar method to the TwitterBootstrapMvc library:
http://www.codeproject.com/Articles/570762/TwitterBootstrapMvc
It not allows for the following syntax:
@using (var nav = Html.Bootstrap().Begin(new Nav().SetLinksActiveByControllerAndAction()))
{
@nav.ActionLink(“Link 1”, MVC.Account.SomeAction())
@nav.ActionLink(“Link 2”, “SomeOtherAction”)
}
Nice library you have there. Glad the article helped.
Its like you read my mind! You appear to know so much about this, like
you wrote the book in it or something. I think that
you could do with some pics to drive the message home a bit, but instead of that, this is magnificent blog.
A great read. I will certainly be back.
Thanks – works great!
Thanks for the tip Chris. However, you’ll need to tweak it a bit so that it is not case-sensitive – it fails to set the active link when the project uses lower case URLs. Thanks again!
Quick solutions for lower case URL
if (controllerName.ToLower() == currentController.ToLower() && actionName.ToLower() == currentAction.ToLower())
builder.AddCssClass(“active”);
BAAAAAAAAAAAAAM! Good shit.
I am regular visitor, how are you everybody? This article posted
at this web page is genuinely good.
[…] post builds on an article I recently stumbled upon while searching for ways to set the “active” link / tab of a Twitter Bootstrap navbar […]
Hey Chris, this article helped me out and also gave me an idea to extend it to support dropdown menu items. I referenced your post in my blog and hope you don’t mind. You can see my extension method at http://www.franksbrain.com/2013/11/21/setting-the-active-link-in-a-twitter-bootstrap-navbar-navtab-with-dropdowns-using-asp-net-mvc/ (hope you don’t mind me posting the link on here!) Thanks!
Great solution, All that I added was a to upper on the last IF;
if (controllerName.ToUpper() == currentController.ToUpper() && actionName.ToUpper() == currentAction.ToUpper())
Thanks! This was a big help. Great Job!!!
I am having a problem applying this solution to my project.
In a big project, with dynamic generated Urls you need to have a separate controller for the navigation and a partial view that needs to be rendered in the _Layout page. In this case the controlle’s name returned is the Navigation controller instead of the action controller.
Any thoughts or advises how to handle this case?
Awesome Thanks! Just what I was looking for!
Hi there, I’ve found this very handy, good job
but wondering if you can help me with a small problem it introduces in my case?
With the original link (Link 1) I had a glyphicon preceding the link text like so;
Books
but I cannot find a way to make this work using this active link method.
Any tips would be appreciated!
lol well those links weren’t intended to BE links lol
to clarify, I would like to put a span inside the “a href” so it shows up in front of the linkText..
Hi, thak for the work, I need to use a multilevel menu, how i do? Thank
Works for me!
Investigate the following
/news
The active class is set
/news/more
the active is lost
to fix that you need to remove && actionName == currentAction