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