Question

I have my navigation menu in application.html and the menu has class=”active” . That depends on the page the user is on. How can I dynamically figure out which item needs to have the class:

Here’s how my top menu bar is:

<ul>
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Page1</a></li>
   <li><a href="#">Page2</a></li>
   <li><a href="#">Page3</a></li>
</ul>

Answer 1

One way would be to have an @active_page instance variable in the controllers, which you set on each action. You may also do this already with a title (@title maybe?), so perhaps you could use that instead. Then in the template:

<li class="<%= "active" if @active_page == "Home" %>">...</li>