Question

I’ve got a nav like this:

<nav>
  <ul class='nav nav-pills'>
    <li>
      <%= link_to 'link1', '#' %>
    </li>
    <li>
      <%= link_to 'link1', '#' %>
    </li>
  </ul>
</nav>

My routes, view and controller are set up such that root_url/.../action and root_url/.../action/:page_id will both render the same view, with an instance variable @page being set based on the :page_id param or to a specified default for the action’s root. Later in the view, I’m rendering a partial that matches the name of @page.

What I’m trying to do is set class='active' on the <li> whose link text matches the value of @page.

My original inclination was to stay DRY and set window.page_id to match @page and use CoffeeScript to add the class, but that gave me a very noticeable delay between the page loading and the class being set.

Does anyone know the best method of accomplishing this? Right now I’m putting embedded ruby in each one of the <li> elements, which is rather undesirable.

Answer 1

Borrowed and slightly modified to fit your needs from another S.O. post Best way to add "current" class to nav in Rails 3

def nav_link(link_text, page)
  class_name = link_text == page ? 'active' : ''

  content_tag(:li, :class => class_name) do
    link_to link_text, page
  end
end

used like:

nav_link 'Home', @page