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):

<         


        

Answer 1

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.

Answer 2

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:

1. li element with link containing custom text
2. Optional Bootstrap3 Icon
3. 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'  %>

Answer 3

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

Answer 4

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 %>

Answer 5

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)

Answer 6

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>