RailsでBootstrapのナビゲーションでアクティブメニューに自動でclassを付与

表題の通りなのだけれども、RailsでBootstrap3を使い、以下のようなナビゲーションを作って、Views/layouts/application.html.rbに書いている場合

Views/layouts/application.html.rb

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">タイトル</a>
        </div>

        <div class="collapse navbar-collapse" id="navbarEexample">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">メニューＡ</a></li>
                <li><a href="#">メニューＢ</a></li>
                <li><a href="#">メニューＣ</a></li>
            </ul>
        </div>
    </div>
</nav>

表示

ページが切り替わる度に該当するメニューのところだけactiveクラスを付与したい。
というときがありますね。
そういう場合、例えば

Views/layouts/application.html.rb

<ul class="nav">
  <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>
</ul>

みたいにすることでクラスをつけられるのですが、若干面倒だし見栄えがイマイチ。。

そこで、以下のGemの登場。

comfy/active_link_to: View helper to manage "active" state of a link
https://github.com/comfy/active_link_to

早速やってみる。

Gemfile

gem 'active_link_to'

上記を追加したら、bundle installを実行
すると、こんな感じで書ける。

Views/layouts/application.html.rb

<ul class="nav">
  <%= active_link_to 'TOP', root_path, :wrap_tag => :li, :active => [['welcome'], ['index']] %>
  <%= active_link_to 'About', about_path, :wrap_tag => :li %>
  <%= active_link_to 'Contact', contact_path, :wrap_tag => :li %>
</ul>

クール！
一点、rootを含むパスの指定だとうまくいかない場合がある模様。
その場合は、:active要素に、[[コントローラ名], [アクション名]]
を指定してやると良い。

参考：
active linkでroot pathの設定 - 開発メモ帳
http://d.hatena.ne.jp/runatubu/20121013/1350096568

以上