Question

Sorry I don’t know what the title should be so someone please change it to best fit my question.

Basically, I have a list like this:

<li class="active"><%= link_to "Home", root_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>

depeding on what page I am on (Home, About, Contant), I want the corresponding <li> tag to have class="active" attribute. What the best way to do this?

I have a class variable @title set to whatever page is being navigated.

Answer 1

Use the link_to_unless_current helper. You’ll need slightly different css, but it is worth it. You won’t have to worry about @title etc, and you won’t get confusing links to the current page. For example, use:

<nav>
  <% [["Home", :home], ["About", :about], ["Contact", :contact]].each do |name,url| %>
    <li><%= link_to_unless_current(name, url) %></li>
  <% end %>
</nav>

And then, suppose you want the “active” case to be bold and green, use this CSS:

nav li {  /* active case */
  font-weight: bold;
  color: green;
}
nav li a {  /* normal, link case */
  font-weight: normal;
  color: blue;
}