Skip to content

Instantly share code, notes, and snippets.

@mynameispj
Created June 2, 2013 00:24
Show Gist options
  • Save mynameispj/5692162 to your computer and use it in GitHub Desktop.
Save mynameispj/5692162 to your computer and use it in GitHub Desktop.
Rails - Easy "active" classes for menu links in Rails
module ApplicationHelper
def current_class?(test_path)
return 'active' if request.path == test_path
''
end
end
<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>
@lalit-nga
Copy link

lalit-nga commented Jul 4, 2017

Just simplify the current_class? method :)

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

@ijrodrigues
Copy link

Thanks!!! Works here 👍

@pawciogh
Copy link

pawciogh commented May 17, 2018

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

@Elzonor
Copy link

Elzonor commented May 27, 2018

@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" %>

@philihp
Copy link

philihp commented Jul 17, 2018

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>

@RSchneider94
Copy link

Perfect. Thank you!

@LadyBytes
Copy link

This is so convenient. Thank you!

@aslam
Copy link

aslam commented Dec 6, 2018

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

@kokogakayui
Copy link

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

@dan3lson
Copy link

dan3lson commented Aug 3, 2020

..

  • <%= 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.

@munirdelta
Copy link

Perfect thanks Improved the naming convention tho

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

@czepesch
Copy link

czepesch commented Feb 16, 2022

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment