Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@ashkmehr1366
Copy link

ashkmehr1366 commented Dec 22, 2015

Thanks man 👍 Works perfect 🎱

@guayom
Copy link

guayom commented Feb 5, 2016

Thanks for this method!
At line 5, what are those '' for?

@SanderVerkuil
Copy link

SanderVerkuil commented Mar 27, 2016

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

@Faisal-nfl
Copy link

Faisal-nfl commented May 19, 2016

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

  • tag

  • @bgilbank
    Copy link

    bgilbank commented Sep 15, 2016

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

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

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

    @andresmao23
    Copy link

    andresmao23 commented Dec 30, 2016

    Thanks!!! it works...

    @gnclmorais
    Copy link

    gnclmorais commented Apr 21, 2017

    @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

    ijrodrigues commented Oct 17, 2017

    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

    RSchneider94 commented Oct 15, 2018

    Perfect. Thank you!

    @LadyBytes
    Copy link

    LadyBytes commented Nov 11, 2018

    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

    kokogakayui commented Jul 8, 2019

    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

    munirdelta commented Dec 18, 2020

    Perfect thanks Improved the naming convention tho

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

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