Make links CSS in current URL different (Ruby on Rails)

Question

I want to make links on current URL with different CSS.

Ex: If I'm in "/photos", I want to have the Photos link to be in a different color (as active).

Isnt there a method in Rails to make this?

Thanks

You can use [current_page?](http://apidock.com/rails/ActionView/Helpers/UrlHelper/current_page%3F) method, take a look at my answer here http://stackoverflow.com/a/17482101/1297435 — rails_id, May 22 '14 at 15:25
@anonymousxxx `current_page?` working link: http://apidock.com/rails/ActionView/Helpers/UrlHelper/current_page%3F — MrYoshiji, May 22 '14 at 15:30

score 0 · Accepted Answer · answered May 22 '14 at 15:10

0

You can test the params[:controller] to do so:

%ul
  %li= link_to 'Users', users_path, class: (UsersController.controller_name == params[:controller]) ? 'active' : 'not_active'
  %li= link_to 'Photos', photos_path, class: (PhotosController.controller_name == params[:controller]) ? 'active' : 'not_active'

But this seems to be heavy and annoying to copy/paste everything for each link... -> Let's make a helper!

# application_helper.rb    
def active_if_in_controller?(*controllers)
  is_in_controller = controllers.flatten.map(&:to_s).include? controller_name
  is_in_controller ? 'active' : 'not_active'
end

# usage in views:
%ul
  %li= link_to 'Users', users_path, class: active_if_in_controller?(UsersController.controller_name)
  %li= link_to 'Settings', settings_path, class: active_if_in_controller?(Settings::UsersController, Settings::PhotosController)

answered May 22 '14 at 15:10

MrYoshiji

54,334
13
124
117

This will like the other answers only work for the index actions. When you are in any show action for example the link to the index action of the shown objects class will be highlighted but not the link to the page currently shown – davidb May 22 '14 at 15:15
1

You are wrong, it will highlight every links leading to the same controller as the current one, whatever the action is. The action is not involved here. – MrYoshiji May 22 '14 at 15:17
Okay your right about that but that might also include other links that are linking to other controller actions that arent the ones that is currently shown – davidb May 22 '14 at 15:20
The asker did say `Ex: If I'm in "/photos", I want to have the Photos link to be in a different color` He is not talking about specific actions, I think he just wants to colorize his menus, which only contains links to index pages. But this part needs clarification from the Asker – MrYoshiji May 22 '14 at 15:25
your right about that but thats also just an example and the currently called url from which the questioner talked might be any url not only index actions. We wont figure out if he doesnt tell us more... – davidb May 22 '14 at 15:27
In this case (if the Asker want the "active" class to be specific to the controller AND the controller's action), this solution should be used: http://stackoverflow.com/questions/17481812/dynamically-add-active-class-to-bootstrap-li-in-rails/17482101#17482101 – MrYoshiji May 22 '14 at 15:29

score -1 · Answer 2 · answered May 22 '14 at 15:01

-1

You can add a class to the body tag representing your current controller name in application.html.erb:

<body class="<%= controller.controller_name %>">

That code will result this on "/photos":

<body class="photos">

In your css file add something like this:

body.photos a.active {
  color: red
}

answered May 22 '14 at 15:01

Aleksander Lopez

515
4
17

The CSS rule will match all `body` tags having the class `.photos` AND the class `.a`, I think you meant `body.photos a` -- But still, this will color in red every `a` tags contained in the body, not only the "active" one... – MrYoshiji May 22 '14 at 15:03

score -1 · Answer 3 · answered May 22 '14 at 15:01

The creation of the links (Rails) will have to add a specific class to the link of the current page. e.g. "active". It should look something like this:

<ul>
    <li><a href="">link1</a></li>
    <li><a href="" class="active">current link</a></li>
     <li><a href="">link3</a></li>
</ul>

Now you should style accordingly the "active" class. Example:

a.active {
    color: #fff;
}

score -1 · Answer 4 · edited May 23 '17 at 11:50

-1

You should do this using javascript. The reason for this is simple. When you want to do this serverside you need to touch the link_to method which isnt't for beginners. You can do this with jQuery easy:

$("a[href*='" + location.pathname + "']").addClass("current_link");

Then in css:

.current_link {
  # highlight the link in some kind
}

// You can also use the canonial link element when you have many urls that match one page for SEO reasons. Then you can also use this element to highlight the correct link:

$("a[href*='" + $('link[rel=canonical]').attr('href') + "']").addClass("current_link");

THis will not work when you use get parameters but for that case you can cut away all params included in the url if that works for you can find an explaination here.

edited May 23 '17 at 11:50

Community

1
1

answered May 22 '14 at 15:09

davidb

8,884
4
36
72

That is smart, I never tought of this solution! +1 – MrYoshiji May 22 '14 at 15:15
Actually this does not work: if you have few links with the same `pathname` but with different params, like `/users/1/photos?filter=most_popular` and `/users/1/photos?filter=most_shared`, it will highlight them all... – MrYoshiji May 22 '14 at 15:24

Make links CSS in current URL different (Ruby on Rails)

4 Answers4