Twitter Bootstrap Pills with Rails 3.2.2

Question

I followed the basic railscast for using Twitter Bootstrap in Rails application. Everything was great, until I had to push to heroku, then I had some problems with pg gem, and I had to rake assets:precompile to push it ok. Finally I solved.

Now, I'm trying to use pills in my application, I have copy/paste from documentation and changed the url in href :)

<div class="container">
  <div class="row">

    <div class="span3">
      <p> Lorem Ipsum</p>
    </div>

    <div class="span9">    
      <ul class="nav nav-pills">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/categories">Categories</a></li>
      </ul>
    </div>

  </div>
</div>

When I push one of the links, I'm redirected to the right url but the selected option doesn't change to class="active". I don't know why... I thought it was the javascript but hover property works ok... I mean, when the mouse is over an option (diferent from active) its style changes ok.

I tried rake assets:clean, but no change is made

Thanks

possible duplicate of [How to get Twitter-Bootstrap navigation to show active link?](http://stackoverflow.com/questions/9879169/how-to-get-twitter-bootstrap-navigation-to-show-active-link) — maximus ツ, Jan 11 '15 at 23:15

score 20 · Answer 1 · answered Mar 25 '12 at 18:17

20

You actually have to handle this by yourself!

Your list should look something like

    <li class="<%= 'active' if params[:controller] == 'yourdefaultcontroller' %>"><a href="/">Home</a></li>
    <li class="<%= 'active' if params[:controller] == 'products' %>"><a href="/products">Products</a></li>
    <li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="/categories">Categories</a></li>

You need to specify in each request which tab is the active one. You can do this by relying on the name of the controller (and action if need be) that is passed in the params hash.

answered Mar 25 '12 at 18:17

Pierre

8,368
4
34
50

1

@user1088357 Click the checkmark next to his name to accept his answer. This worked for me as well. Thanks Pierre in the question I made on this too. – LearningRoR Mar 26 '12 at 20:52
4

I think the idea is correct here, but going directly to the params hash seems like a bad idea. Likewise for repeating the same code over and over. I would recommend at least using the current_page? method to check the current controller/action, and would also move the code into a helper to avoid the code repetition. – Dustin Frazier May 09 '12 at 17:13

score 19 · Answer 2 · answered Jul 27 '12 at 14:38

You can use something like this:

<li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
<li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>

score 6 · Answer 3 · answered Jun 07 '14 at 08:31

I used a helper to implement this in the style of Rails' form helpers.

In a helper (e.g. app/helpers/ApplicationHelper.rb):

def nav_bar
  content_tag(:ul, class: "nav navbar-nav") do
    yield
  end
end

def nav_link(text, path)
  options = current_page?(path) ? { class: "active" } : {}
  content_tag(:li, options) do
    link_to text, path
  end
end

Then, in a view (e.g. app/views/layouts/application.html.erb):

<%= nav_bar do %>
  <%= nav_link 'Home', root_path %>
  <%= nav_link 'Posts', posts_path %>
  <%= nav_link 'Users', users_path %>
<% end %>

This example produces (when on the 'users' page):

<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/posts">Posts</a></li>
  <li class="active"><a href="/users">Users</a></li>
</ul>

Twitter Bootstrap Pills with Rails 3.2.2

3 Answers3

Linked