Rails - Easy "active" classes for menu links in Rails

application_helper.rb

module ApplicationHelper

  def current_class?(test_path)
    return 'active' if request.path == test_path
    ''
  end

end

menu.html.erb

<nav class="subnav">
  <ul>
    <li><%= link_to "account stats", account_path, :class => current_class?(account_path)  %></li>
    <li><%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment')  %></li>
    <li><%= link_to "profile settings", profile_path, :class => current_class?(profile_path) %></li>
  </ul>
</nav>

@guayom: Ruby returns by default the last statement. Therefore if the '' were to be omitted, nothing would be returned when the paths wouldn't be equal. 😄

its applying active class on tag
what if I want to apply it on

tag

I use two different header/menu styles in my app. How would you add a second active class?

.active(1) {
color: #000;
opacity: 1;
font-weight: 600;
}

.active(2) {
color: #fff;
opacity: 1;
font-weight: 600;
}

Thanks!!! it works...

@SanderVerkuil, why not just this?

def current_class?(test_path)
  'active' if request.path == test_path
end

It will return nil if request.path != test_path.

..

<%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment/edit') %>

<%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment/new') %>

<%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment/1') %>

..

How to apply same style based on controller?

@Aravin, you can use next code:
https://gist.github.com/N0xFF/4c70461d854e33aac4bf91925f1691ff

Just simplify the current_class? method :)

def current_class?(test_path)
    request.path == test_path ? 'active' : ''
end

Thanks!!! Works here 👍

Works great, thanks a lot. I had to add else condition

def current_class?(test_path)
return 'nav-link active' if request.path == test_path else
return 'nav-link'
end

@pawciogh alternatively I added the "nav-link" class directly into the HTML

<%= link_to "All posts", root_path, class: current_class?(root_path) + " nav-link" %>

You can also skip the helper, and use active_link_to, which makes this simply

<nav class="subnav">
  <ul>
    <li><%= active_link_to "account stats", account_path %></li>
    <li><%= active_link_to "payment information", '/account/payment' %></li>
    <li><%= active_link_to "profile settings", profile_path %></li>
  </ul>
</nav>

Perfect. Thank you!

This is so convenient. Thank you!

Good and convenient one.

Also, Rails has a built-in current_page? helper method: https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-current_page-3F

Thank you so much for this ! :) Easy and convenient !

..

• <%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment/edit') %>
• <%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment/new') %>
• <%= link_to "payment information", '/account/payment', :class => current_class?('/account/payment/1') %>
  ..
  How to apply same style based on controller?

@Aravin

Your helper method would could look like this:

	def active_page?(current_page)
		return unless request.path.include?(current_page.to_s)

		'active'
	end

and then your navbar would contain link_tos like this:

          <li class="nav-item <%= active_page?(:dashboard) %>">
            <%= link_to 'Dashboard',
                        dashboard_path,
                        class: 'nav-link' %>
          </li>
          <li class="nav-item <%= active_page?(:contacts) %>">
            <%= link_to 'Contacts',
                        contacts_path,
                        class: 'nav-link' %>
          </li>
          <li class="nav-item <%= active_page?(:touchpoints) %>">
            <%= link_to 'Touchpoints',
                        touchpoints_path,
                        class: 'nav-link' %>
          </li>

Note this uses Bootstrap 4.

Perfect thanks Improved the naming convention tho

module ApplicationHelper
  def active_class_if_url(url)
    return 'active' if request.path == url
    ''
  end
end

guys, how can I do styling of active links if I have links like that in one view:
- @glossaries.each do |g|
%a.{ :href => glossary_path(g), data: { 'turbo_frame': :'entry' } }
= g.title

But result of clicking g.title is rendered in another turbo frame and url in a browser not present.
Even if I force browser to have url in address bar with "data-turbo-action" => "advance" Helpers is doesn't working.

@mynameispj @gnclmorais @munirdelta @dan3lson

thanks in advance!