# How to style currently active link

**URL:** <https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841>\
**Category:** Rails\
**Created:** [February 9, 2009, 11:04am UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841 "2009-02-09T11:04:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 11:04am UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/1 "2009-02-09T11:04:47Z")

</div>

I have four links on a page generated with link\_to . I want to style the  
currently active link differently than the other 3. I tried passing  
:class =\> “selected” to link\_to but it adds this tag to all 4 links, not  
just the currently active one.

anyideas?

(this is for tabbed navigation)

---

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 11:39am UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/2 "2009-02-09T11:39:50Z")

</div>

i don’t see your code, but generally it works like this:  
\<%= link\_to “Link name”, { :controller =\> ‘controller\_name’, :action  
=\> ‘action\_name’ }, :class =\> ‘someclass’ %\>

then you style your “someclass” via css.

---

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 11:47am UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/3 "2009-02-09T11:47:06Z")

</div>

MaD wrote:

> i don’t see your code, but generally it works like this:  
> \<%= link\_to “Link name”, { :controller =\> ‘controller\_name’, :action  
> =\> ‘action\_name’ }, :class =\> ‘someclass’ %\>
> 
> then you style your “someclass” via css.

Thanks for the reply, but doesnt the above add the class “someclass” to  
all four links at the same time? I dont want to do taht, i want to add  
something like “selected” to the currently active link and “unselected”  
to the other three? If that is so how would you style the currently  
selected link differently that the other three?

---

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 11:51am UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/4 "2009-02-09T11:51:35Z")

</div>

I think that you’re looking for something like that…

\<%= link\_to\_unless\_current(‘Add contact’, new\_contact\_url, :class =\>  
‘adduser’) { link\_to(‘Add contact’, new\_contact\_url, :class =\>  
‘selected’) } %\>

[http://apidock.com/rails/ActionView/Helpers/UrlHelper/link\_to\_unless\_current](http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to_unless_current)

Adam A. escribió:

---

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 1:17pm UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/5 "2009-02-09T13:17:16Z")

</div>

Thank you both for your responses.

Ive gone with Juans as it does what i need is shorter code. The only one  
problem is that it results in the selected link still being selectABLE  
ie. it can still be clicked on even though its the current page in view.  
I can style it so that it looks like it isnt clickable so top banana!

if there is a way to fix this minor side issue id love to know.

many thanks

---

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 1:23pm UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/6 "2009-02-09T13:23:44Z")

</div>

In this video you’ll see the behaviour you’re looking for… (min 33)

[http://s3.amazonaws.com/lr\_screencasts/learningrails-17.mov](http://s3.amazonaws.com/lr_screencasts/learningrails-17.mov)

Adam A. escribió:

---

<div class="post-metadata">

**Author:** ![scudco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/aca169/32.png) [@scudco](https://www.ruby-forum.com/u/scudco)\
**Post date:** [February 9, 2009, 11:59am UTC](https://www.ruby-forum.com/t/how-to-style-currently-active-link/159841/7 "2009-02-09T11:59:47Z")

</div>

On Feb 9, 10:04 am, Adam A. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)  
wrote:

> I have four links on a page generated with link\_to . I want to style the  
> currently active link differently than the other 3. I tried passing  
> :class =\> “selected” to link\_to but it adds this tag to all 4 links, not  
> just the currently active one.
> 
> anyideas?
> 
> ## (this is for tabbed navigation)
> 
> Posted viahttp://www.ruby-forum.com/.

Well the problem is that you need to set class=“#{‘selected’ if  
SOMETHING}” so the question becomes “what is SOMETHING?”.

This might get criticised but here is what I am doing in my current  
app. I have a helper that looks something like

def class\_for\_link(uri)  
hsh = ActionController::Routing::Routes.recognize\_path(uri,  
{ :method =\> :get }) # You might need to gsub out the root of this url  
first  
[hsh[:controller], hsh[:action]] == [controller.controller\_name,  
controller.action\_name] ? ‘active’ : ‘’  
end

Then in the views I can say something like

\<%= link\_to “John”, person\_path(1), :class =\> 'style1 style2 ’ +  
class\_for\_link(person\_path(1)) %\>