Add css class to rails link_to helper

Question

I'm trying to style a rails link using css using the following code:

<%= link_to "Learn More", :controller => "menus", :action => "index", :class => "btn btn-inverse" %>

I would expect that this would create a link that looks like this:

<a href="menus/" class="btn btn-inverse">Learn More</a>

Instead, rails is rendering this -

<a href="/menus?class=btn+btn-inverse">Learn More</a>

Has anyone else had this problem / know what I'm doing wrong? I know I can avoid this problem by manually creating the anchor tag rather than using helper, but I was wondering if there was a way to pass the css class info to the helper itself. I'm using Rails 3.2.6.

Thanks!

What happens with :class => ["btn", "btn-inverse"] or :class => %w"btn btn-inverse" ? — Marlin Pierce
– Marlin Pierce, Commented Oct 22, 2012 at 17:10
You could also just use menus_path as the second argument to link_to instead of specifying the controller and action. — James
– James, Commented Oct 22, 2012 at 17:50

MrYoshiji · Accepted Answer · 2014-06-11 13:00:55Z

143

You have a syntax problem. Try this instead:

<%= link_to "Learn More", {controller: "menus", action: "index"}, class: "btn btn-inverse" %>

Some documentation for you to go further with the link_to Helper

They say:

Be careful when using the older argument style, as an extra literal hash is needed:

link_to "Articles", { :controller => "articles" }, :id => "news", :class => "article"
# => <a href="/articles" class="article" id="news">Articles</a>

Leaving the hash off gives the wrong link:

link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
# => <a href="/articles/index/news?class=article">WRONG!</a>

I recommend you to use the URL helper generated following your routes configuration. In your case:

link_to "Learn More", menus_path, :class => "btn btn-inverse"

A little reminder on the Helpers generated:

# routes.rb
resources :users

# any view/controller
users_path #=> /users
edit_user_path(user) #=> /users/:id/edit
user_path(user) #=> /users/:id  (show action)
new_user_path(user) #=> /users/new

edited Jun 11, 2014 at 13:00

answered Oct 22, 2012 at 17:09

MrYoshiji

54.9k13 gold badges130 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blake Over a year ago

Ah, I was missing that hash. That's exactly what I was looking for, thanks!

Blake Over a year ago

yeah, I know - it makes you wait a few minutes from when you ask the question. two more minutes!

Pavel Chuchuva · Accepted Answer · 2016-03-22 01:38:39Z

5

Try new argument convention:

<%= link_to 'Learn More', 'menus#index', class: 'btn btn-inverse' %>

edited Mar 22, 2016 at 1:38

Pavel Chuchuva

22.6k11 gold badges103 silver badges119 bronze badges

answered Jun 19, 2013 at 8:08

Kamesh Prasad

691 silver badge3 bronze badges

Comments

CoderMiguel · Accepted Answer · 2019-09-27 18:40:24Z

3

if you do not have a controller action / route necessary for the link, you can pass nil as the placeholder and get the classes to apply as necessary

<%= link_to 'link verbiage', nil,  class: 'classes for action tag'%>

answered Sep 27, 2019 at 18:40

CoderMiguel

8348 silver badges17 bronze badges

1 Comment

CoderMiguel Over a year ago

The case for this is when you are over riding the click event with something like Jquery.

bummi · Accepted Answer · 2015-12-16 19:06:35Z

0

I solved my problem by the way

<%= link_to image_tag("imageexamplo.png", class: 'class or id examplo css'),{controller: "user" , action: "index"}%>

edited Dec 16, 2015 at 19:06

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Dec 16, 2015 at 18:54

Caetano

1

Comments

jonbarlo · Accepted Answer · 2018-03-16 22:29:02Z

0

This is how i solved it using another view engine, HAML just in case a fellow developer is having this need

%i= link_to "Add New Blog Post", user_post_edit_new_url(current_user), :class  => "fa fa-plus-circle"

edited Mar 16, 2018 at 22:29

answered Mar 16, 2018 at 22:21

jonbarlo

8,1251 gold badge54 silver badges38 bronze badges

Collectives™ on Stack Overflow

Add css class to rails link_to helper

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related