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>
@andresmao23
Copy link

Thanks!!! it works...

@gnclmorais
Copy link

@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.

@Aravin
Copy link

Aravin commented May 23, 2017

..

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

    @N0xFF
    Copy link

    N0xFF commented Jun 10, 2017

    @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