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

以上