komagataのブログ

好みのgemが無いのでいつも書いてるヤツをご紹介します。gemにすると仰々しくなりそうでしない。

使い方

例えば、

トップページ > ブランド一覧 > ブランド個別 > モデル個別 > グレード個別

のような構造になってる車のサイトのグレード個別ページの場合。

indexやshowのviewの上の方に書く。（設定ファイルやcontrollerに書くやり方は好かん）

リンク文字とURLをadd_breadcrumbする。

- add_breadcrumb "全てのブランド", brands_path
- add_breadcrumb @grade.model.brand.name, @grade.model.brand
- add_breadcrumb @grade.model.name, @grade.model
- add_breadcrumb @grade.name, @grade

（ビューの色々）

最後のパンくずはリンク無しになります。 トップページはいつもHOMEかつroot_pathなので決め打ちです。

見た目はこんな感じになります。

HTMLはこんな感じになります。

<ol class="breadcrumbs">
  <li class="breadcrumb"><a href="/">HOME</a></li>
  <li class="breadcrumb"><a href="/brands">全てのブランド</a></li>
  <li class="breadcrumb"><a href="/brands/455594730">メルセデス・ベンツ</a></li>
  <li class="breadcrumb"><a href="/models/64350864">Aクラス</a></li>
  <li class="breadcrumb">A 180</li>
</ol>

実装

実装は下記2ファイルです。いつもこれを前のプロジェクトからコピーしてます。

パーシャルファイルのマークアップは毎プロジェクト変わりますが、helperの方はずいぶん前から変わってない。

# app/helpers/breadcrumbs_helper.rb:
module BreadcrumbsHelper
  def add_breadcrumb(name, path)
    unless @_breadcrumbs
      @_breadcrumbs = [OpenStruct.new(name: "HOME", path: root_path)]
    end

    if @_breadcrumbs
      @_breadcrumbs << OpenStruct.new(name: name, path: path)
    end
  end

  def breadcrumbs
    @_breadcrumbs
  end
end

# app/views/application/_breadcrumbs.html.slim:
- if breadcrumbs.present?
  ol.breadcrumbs
    - breadcrumbs.each do |breadcrumb|
      li.breadcrumb
        - if breadcrumbs.last != breadcrumb
          = link_to breadcrumb.name, breadcrumb.path
        - else
          = breadcrumb.name

使用感

意識低い感じですが、僕としては以前はパンくずごときでイライラしてたのでこのゆるい実装が心地よいです。