Add 'Current' Class to Website Menu in Rails

It is common to have ‘active’ state or ‘current’ state on website navigation. This will help visitors to know which page they have selected.

This solution is based on Stackoverflow’s question which I couldn’t find. First, I’ll create a method inside Rails application_helper.rb file. I’ll call this method cp(). Here are the syntax:

application_helper.rb
1
2
3
4
5
6
module ApplicationHelper
  def cp(path)
    current_route = Rails.application.routes.recognize_path(path)
    "current" if current_page?(path) or params[:controller] == current_route[:controller]
  end
end

The method uses current_page and Rails.application.routes.recognize_path to get information about current page.

After that we can use it in our view. Here is the example:

application.html.erb
1
2
3
4
5
6
7
8
9
<nav id="menu-panel">
    <%= link_to 'SERVICES', services_path, class: cp('/services') %>
    <%= link_to 'FACILITIES', facilities_path, class: cp('/facilities') %>
    <%= link_to 'ABOUT', about_path, class: cp('/about') %>
    <%= link_to 'CAREERS', careers_path, class: cp(careers_path) %>
    <%= link_to 'BLOG', blog_index_path, class: cp(blog_index_path) %>
    <%= link_to 'CONTACT', contact_path, class: cp('/contact') %>
    <a href="#" id="close-menu-panel"><b>CLOSE</b></a>
</nav>

I hope that helps.

Comments