How to get Twitter-Bootstrap navigation to show active link?

Question

I'm not understanding how Twitter Bootstrap does active links for the navigation. If I have a regular navigation like this (with ruby on rails linking):

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

How do I keep it active based on the link clicked?

FYI: I use the active_link_to gem and specify {:wrap_class => :li}. This will create:

score 175 · Answer 1 · answered Jul 27 '12 at 14:44

175

You can use something like (very similar to what @phil mentioned, but a little shorter):

<ul class="nav">
  <li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
  <li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
  <li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>
</ul>

answered Jul 27 '12 at 14:44

yorch

7,170
8
32
38

10

doesn't work if you have subnavigation. The path changes but you're in the same section.. makes sense? – Jakob Dam Jensen Mar 31 '13 at 19:53
3

yes, correct, if you want to highlight a menu item no matter what method you are running inside the same controller, you could use @Pierre solution: `'active' if params[:controller] == 'controller1'` – yorch May 09 '13 at 16:48
2

How can I add more paths or a specific path like `user_*_path` in `<%= 'active' if current_page?(root_path) %>` ? – Ismoh Apr 09 '14 at 16:43
1

How would you add more than one path to make the menu item active? For instance, if you have several items in a dropdown that are components of the same menu item, and you'd like to make the menu item active when you're on any of the pages found in the dropdown menu? Please let us know as soon as possible. – msc Aug 07 '14 at 19:56

score 98 · Accepted Answer · edited May 23 '17 at 12:26

98

Just made an answer on the very same question here Twitter Bootstrap Pills with Rails 3.2.2

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>

edited May 23 '17 at 12:26

Community

1
1

answered Mar 26 '12 at 20:27

Pierre

8,368
4
34
50

22

I think the idea is correct here, but going directly to the params hash seems like a bad idea. Likewise for repeating the same code over and over. I would recommend at least using the current_page? method to check the current controller/action, and would also move the code into a helper to avoid the code repetition. – Dustin Frazier May 09 '12 at 17:17
2

I wonder how do I write the same in haml. Converting to haml doesn't work for me. Or perhaps I'm wrong somewhere – benchwarmer Jul 16 '12 at 17:31
14

HAML implementation `%li{:class => "#{'active' if current_page?(root_path)}"}=link_to "Home", root_path ` – Brian Feb 18 '13 at 00:44
Is there an elegant way of making this work with friendly_id gem without doing db requests? – Engin Erdogan Mar 04 '13 at 16:58
6

Rails docs recommends the use of `controller_name` and `action_name` helpers instead of accessing them from the params hash. – Alexander Suraphel Sep 29 '13 at 14:30
Or another one for HAML: `%li{class: params[:controller].nil? ? 'active' : ''}= link_to 'Home', root_path` – Al17 Jan 28 '15 at 12:23

score 47 · Answer 3 · answered Aug 04 '12 at 17:48

47

https://github.com/twg/active_link_to

<%= active_link_to 'Users', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="/users">Users</a></li>

answered Aug 04 '12 at 17:48

Hesham

2,327
2
20
24

7

Love it. Why rewrite the wheel? – lightyrs Dec 18 '12 at 21:43
This should really be the way to go...Unless you don't want to pull in another dependency. – Mark G. Apr 22 '13 at 01:40

score 34 · Answer 4 · answered Jun 07 '14 at 08:30

I used a helper to implement this in the style of Rails' form helpers.

In a helper (e.g. app/helpers/ApplicationHelper.rb):

def nav_bar
  content_tag(:ul, class: "nav navbar-nav") do
    yield
  end
end

def nav_link(text, path)
  options = current_page?(path) ? { class: "active" } : {}
  content_tag(:li, options) do
    link_to text, path
  end
end

Then, in a view (e.g. app/views/layouts/application.html.erb):

<%= nav_bar do %>
  <%= nav_link 'Home', root_path %>
  <%= nav_link 'Posts', posts_path %>
  <%= nav_link 'Users', users_path %>
<% end %>

This example produces (when on the 'users' page):

<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/posts">Posts</a></li>
  <li class="active"><a href="/users">Users</a></li>
</ul>

I like this idea, however I'd add a third argument to the nav_link function called html={} that's then passed to link_to. That way you can pass an html hash to nav_link the same way you'd use link_to normally. — Ryan Friedman, Feb 11 '17 at 22:10

score 22 · Answer 5 · answered Nov 14 '12 at 08:46

22

Use this instead to select active link in nav based on the current route without server code:

    $(document).ready(function () {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });

answered Nov 14 '12 at 08:46

Christian Landgren

13,127
6
35
31

2

This is the best solution cause it works with dropdown menus as well, and I include the line ```$('li.active').closest('.dropdown').addClass('active');``` to highlight the parent menu too. – Seralto Aug 30 '16 at 19:36
how to change it to apply for sub-pages also? like http://example.com/home will work. I need link "Home" to be active in case of http://example.com/home/page also. – athultuttu Apr 18 '18 at 13:44

score 11 · Answer 6 · answered Jan 15 '13 at 16:58

11

I've found success using the logical and (&&) in haml:

%ul.nav
  %li{class: current_page?(events_path) && 'active'}
    = link_to "Events", events_path
  %li{class: current_page?(about_path) && 'active'}
    = link_to "About Us", about_path

answered Jan 15 '13 at 16:58

Meltemi

37,979
50
195
293

score 5 · Answer 7 · answered May 02 '12 at 12:10

5

For each link:

<% if current_page?(home_path) -%><li class="active"><% else -%><li><% end -%>
  <%= link_to 'Home', home_path %>
</li>

or even

<li <% if current_page?(home_path) -%>class="active"<% end -%>>
  <%= link_to 'Home', home_path %>
</li>

answered May 02 '12 at 12:10

phil pirozhkov

4,740
2
33
40

score 3 · Answer 8 · answered Jun 07 '12 at 02:01

Today I had the same question/problem but with an other approach for the solution. I create a helper function in application_helper.rb:

def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end

and the link looks like this:

<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>

You can replace params[:action] with params[:controller] and set your controller name in the link.

scottkekoa · Answer 9 · 2017-06-21T15:14:15.807

3

Basic, No Helper

<%= content_tag(:li, class: ('active' if request.path == '/contact')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

I use this since I have more than one class -

<%= content_tag(:li, class: (request.path == '/contact' ? 'active black' : 'black')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

edited Jun 21 '17 at 15:14

answered Jun 21 '17 at 14:26

scottkekoa

134
2
10

1

This will work for any sub navigation also...just use the parent request path in the sub link. – scottkekoa Jun 21 '17 at 14:31

score 3 · Answer 10 · answered Mar 26 '12 at 20:20

3

not sure if you are asking about how the twitter bootstrap css is used, or the rails side. I'm assuming the rails side.

if so checkout the #link_to_if method or the #link_to_unless_current method

answered Mar 26 '12 at 20:20

cpjolicoeur

12,766
7
48
59

score 2 · Answer 11 · answered Jun 24 '13 at 14:03

2

I use this for each li:

<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>

answered Jun 24 '13 at 14:03

andreofthecape

1,166
11
24

Class needs to be set for `li` not `a` – Christopher Oezbek Jun 20 '15 at 14:51

score 2 · Answer 12 · answered Oct 20 '15 at 08:48

You may define a helper method in application_helper.rb

def create_link(text, path)
  class_name = current_page?(path) ? 'active' : ''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

Now you can use like:

create_link 'xyz', any_path which would render as

<li class="active">
  <a href="/any">xyz</a>
</li>

Hope it helps!

score 2 · Answer 13 · answered Sep 16 '17 at 15:35

Here's what I did:

I created a ViewsHelper and included in ApplicationController:

include ViewsHelper

Inside ViewsHelper I created a simple method like this:

def page_state(path)
  current_page?(path) ? 'active' : ''
end

In my view I do this:

<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>

score 1 · Answer 14 · answered Oct 31 '13 at 12:17

I wrote simple helper method using build in view helper current_page? when you can specify custom class name in html_options hash.

def active_link_to(name = nil, options = nil, html_options = nil, &block)
  active_class = html_options[:active] || "active"
  html_options.delete(:active)
  html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
  link_to(name, options, html_options, &block)
end

Examples (when you are on root_path route):

<%= active_link_to "Main", root_path %>
# <a href="/" class="active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered" %>
# <a href="/" class="bordered active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
# <a href="/" class="bordered disabled">Main</a>

score 1 · Answer 15 · answered Dec 12 '13 at 16:07

Many of the answers here have things that will work, or partial answers. I combined a bunch of things to make this rails helper method I use:

# helper to make bootstrap3 nav-pill <li>'s with links in them, that have
# proper 'active' class if active. 
#
# the current pill will have 'active' tag on the <li>
#
# html_options param will apply to <li>, not <a>. 
#
# can pass block which will be given to `link_to` as normal. 
def bootstrap_pill_link_to(label, link_params, html_options = {})
  current = current_page?(link_params)

  if current
    html_options[:class] ||= ""
    html_options[:class] << " active "
  end

  content_tag(:li, html_options) do
    link_to(label, link_params)
  end      
end

It could be made even fancier with argument checking to support &block on the link_to etc.

Lukasz Muzyka · Answer 16 · 2014-06-19T07:40:37.660

Many answers already, but here is what I wrote to get Bootstrap Icons working with active link. Hope It will help someone

This helper will give you:

li element with link containing custom text
Optional Bootstrap3 Icon
will turn active when you're on the right page

Put this in your application_helper.rb

def nav_link(link_text, link_path, icon='')
  class_name = current_page?(link_path) ? 'active' : ''
  icon_class = "glyphicon glyphicon-" + icon

  content_tag(:li, :class => class_name) do
    (class_name == '') ? (link_to content_tag(:span, " "+link_text, class: icon_class), link_path)
    : (link_to content_tag(:span, " "+link_text, class: icon_class), '#')
  end
end

And use link:

<%= nav_link 'Home', root_path, 'home'  %>

Last argument is optional - it will add icon to the link. Use names of glyph icons. If you want icon with no text:

    <%= nav_link '', root_path, 'home'  %>

score 1 · Answer 17 · answered Mar 26 '12 at 20:20

You should do it yourself by manipulating CSS classes. That is, if a user clicks on some link, then do something (target action), set previous link inactive and new link active.

If your links take you to the server (that is, make page reload), then you can just render active link correctly on the server. Otherwise, if you're doing some client-side stuff (switching tab panes or whatever), you have to use javascript.

score 1 · Answer 18 · answered Mar 26 '12 at 20:33

1

you could use tabulous for the links

article here on how to combine tabulous with twitter bootstrap and rails 3.x

answered Mar 26 '12 at 20:33

stephenmurdoch

34,024
29
114
189

score 0 · Answer 19 · edited Jun 20 '20 at 09:12

Shortest code

This deals with BOTH nav, and sub nav list elements. You can pass either an array a single path and will deal with both.

application_helper

# Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end

view (html.erb)

<ul class="nav navbar-nav">
  <li class="<%= ap p: home_path %>">Home</li>
  <li class="<%= ap p: account_path %>">Account</li>

  <li class="dropdown <%= ap p: [users_path, new_user_path] %>">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Users</a>
    <ul class="dropdown-menu" role="menu">
      <li class="<%= ap p: users_path %>">Users</li>
      <li class="<%= ap p: new_user_path %>">Add user</li>
    </ul>
  </li>
</ul>

score 0 · Answer 20 · answered Jun 02 '16 at 22:36

Using ruby on Sinatra ..

I m using bootstrap bare theme, here is the sample navbar code. Note the class name of the element -> .nav - as this is referred in java script.

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

in the view page (or partial) add this :javascript, this needs to be executed every time page loads.

haml view snippet ->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

In the javascript debugger make sure you have value of 'href' attribute matches with window.location.pathname. This is slightly different than the solution by @Zitrax which helped me fixing my issue.

score 0 · Answer 21 · answered Dec 18 '17 at 12:11

  def active_navigation?(controllers_name, actions_name)
   'active' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

slim

li class=(active_navigation?(['events'], ['index', 'show'])) = link_to t('navbar.events'), events_path

score 0 · Answer 22 · answered Jan 05 '21 at 18:57

This worked for me:

          <li class="nav-item <%= 'active' if current_page?(root_path) %>" >
            <%= link_to 'Home', root_path, class:"nav-link"%>
          </li>
          <li class="nav-item <%= 'active' if current_page?(tools_path) %>" >
            <%= link_to 'Tools', tools_path, class:"nav-link" %>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Request a new tool</a>
          </li>
          <li class="nav-item <%= 'active' if current_page?(home_about_path) %>" >
            <%= link_to 'About us', home_about_path, class:"nav-link"%>
          </li>

The code inside the <%= %> is just ruby, and the = means that the result of that code will be displayed on the HTML.Do this for every option you want to add in your navbar and it should work fine.

score 0 · Answer 23 · answered Mar 26 '12 at 20:25

You sound like you need to implement a navigation system. If it's complex, it might get pretty ugly and pretty fast.

In this case, you might want to use a plugin that can handle that. You could use navigasmic or simple navigation (I would recommend navigasmic because it keeps the main layer in a view, where it belongs, and not in some configuration)

How to get Twitter-Bootstrap navigation to show active link?

23 Answers23

Shortest code

application_helper

view (html.erb)

Linked