How to use active_link_to?

Question

I'm just new to Rails and just finished the One Month Rails course. I googled on how to make my nav link have a different color when I'm on that current link like when I'm in a Home page, the nav Home link should have a background-color etc. And I found this active_link_to, however, I don't know how to read a document yet. How should I use this?

Here's the link to active_link_to documentation: https://github.com/comfy/active_link_to

Here's my code where I supposed the active_link_to should be placed:

<nav class="navbar navbar-static-top navbar-default" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Pinteresting", root_path, class: "navbar-brand" %>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to root_path do %>
            <span class="glyphicon glyphicon-home"></span> Home
          <% end %>
        </li>
        <li>
          <%= link_to about_path do %>
            <span class="glyphicon glyphicon-user"></span> About
          <% end %>
        </li>
        <% if user_signed_in? %>
          <li>
            <%= link_to new_pin_path do %>
              <button type="button" class="btn btn-primary btn-xs">
                <span class="glyphicon glyphicon-pushpin"></span> New Pin
              </button>
            <% end %>
          </li>
          <li>
            <%= link_to edit_user_registration_path do %>
              <span class="glyphicon glyphicon-cog"></span> Account Settings
            <% end %>
          </li>
          <li>
            <%= link_to destroy_user_session_path, method: :delete do %>
            <span class="glyphicon glyphicon-off"></span> Log out
            <% end %>
          </li>
        <% else %>
          <li>
            <%= link_to new_user_session_path do %>
              <span class="glyphicon glyphicon-check"></span> Sign in
            <% end %>
          </li>
        <% end %>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav> 

Answer 1

Here's a simple example showing how to add active_link_to to a project:

Add it to your Gemfile:

gem "active_link_to"

Install the gem via Bundler:

bundle install

Then, to use within your project, simply replace your link_to helpers with active_link_to - you shouldn't have to modify anything else since active_link_to acts as a wrapper for link_to.

Once you've done that, you can add styling for the .active class that is added to any active link.

Somewhere in your stylesheets:

a.active {
  background-color: #6699ff;
  /* other styling here, as desired */
}

Hope this helps!

Answer 2

I don't know how to read a document yet.

You serious?

--

Just follow the steps it tells you...

#Gemfile
gem "active_link_to"

#navbar
<%= active_link_to "Your text", path %>

We've used the gem in this project.

It works exactly like the link_to helper, except when the page you're on matches the supplied path, the link will have an active class attached to it:

active_link_to 'Users', '/users'
# => <a href="/users" class="active">Users</a>

--

If you want to style the "active" links, you'll be able to use the following:

#app/assets/stylesheets/application.css
nav a.active {
   // styles here
}