Ruby on RailsとTwitter Bootstrap 3でパンくずリストを追加する方法

breadcrumbs_on_railsがオススメ

breadcrumbs_on_rails はbootstrapに限らずパンくずリスト(Breadcrumbs)の実装が簡単に出来るのでオススメです。

インストール方法

Gemfileに下記を追記：

gem "breadcrumbs_on_rails"

$ bundle installでサクっとインストールしましょう。

基本の使い方

controllerに記述する

class MyController

  add_breadcrumb "home", :root_path
  add_breadcrumb "my", :my_path

  def index
    # ...

    add_breadcrumb "index", index_path
  end

end

app/controllers/application_controller.rbに追加する事で、サイト全体でデフォルトのパンくずアイテムを追加出来ます。
「ホーム」みたいな項目はそっちに記述するといいかと思います。

viewに記述する

slimだと以下のような感じでOK：

- title "タイトル"
- add_breadcrumb title, request.fullpath

controllerで指定したものの後に追加されます。
viewに書く方がMVCアーキテクチャにより適合していますね。

出力する

app/views/layouts/application.html.slimなどの任意の行に下記を追記しましょう。

= render_breadcrumbs

Bootstrap 3で使う

上記の手順でパンくずリストを出力すると、下記のように単純にaタグの羅列になります。

<a href="http://odoruinu.net/">Home</a> > <a href="/blog">Blog</a> > <a href="/blog/page">Page</a>

ここでは、bootstrap 3のスタイルで書きたいので下記のように出力して欲しいところ：

<ol class="breadcrumb">
  <li><a href="http://odoruinu.net/">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li class="active">Page</li>
</ol>

Bootstrap用ビルダーを作る

breadcrumbs_on_railsではカスタムなフォーマットでパンくずリストを出力するための方法が用意されています。
これを Builder と呼びます。

さっそくBootstrap用のBuilderを作ってみましょう。
以下のような内容をlib/bootstrap_breadcrumbs_builder.rbに作ります：

class BootstrapBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
  def render
    @context.render "/application/breadcrumbs", elements: @elements, b: self
  end

  def compute_name(element)
    case name = element.name
    when Symbol
      @context.send(name)
    when Proc
      name.call(@context)
    else
      name.to_s
    end
  end

  def compute_path(element)
    case path = element.path
    when Symbol
      @context.send(path)
    when Proc
      path.call(@context)
    else
      @context.url_for(path)
    end
  end
end

そして、app/views/application/_breadcrumbs.html.slimに以下のようなファイルを作ります。

- unless elements.length==1 && current_page?( b.compute_path(elements[0]) )
  ol.breadcrumb
    - elements.each do |element|
      li class=( "active" if current_page?( b.compute_path(element) ) )
        =link_to_unless_current b.compute_name(element), b.compute_path(element), element.options

最後に、レイアウトのファイルに以下のように追記すればOK！

#!slim
= render_breadcrumbs builder: ::BootstrapBreadcrumbsBuilder

バッチリ！