What: パンくず機能とは

パンくず機能とはウェブページの上部でよく見かけるこの表示のことです！！

Why: なぜパンくず機能を実装するのか

パンくず機能とはウェブページにおいてユーザーが現在どのページにいるかを視覚的に確認しやすくするための機能です。

How: どうやって実装するのか

step 1:　gemfileの導入

ここでは'gem gretel'をgemfileに追加し、bundle installを実行しましょう。

gem 'gretel'

$ bundle install

step 2: 設定ファイルの作成

bundle installが完了したらrails generate gretel:installを実行しましょう。
すると、configディレクトリにbreadcrumbs.rbが生成されます。
これが設定ファイルになります。

$ rails generate gretel:install

step 3: 設定ファイルの記述

生成されたbreadcrumbs.rbに記述していきます。

今回はアイテム変数を用いて階層構造になっているカテゴリの親、子、孫要素をそれぞえ取得して表示させたいと思います。
ここで一点注意なのですが、ビューで引数に@item変数を引き渡すことに加えて、子要素以降のcrumbのparentに変数itemを追記しないとエラーが発生します！
（原因はわからず、、教えていただけると幸いです！）


crumb :root do
  link 'FreeMa', root_path
end

crumb :parent_category do |item|
  link item.category.parent.parent.name, root_path
  parent :root
end

crumb :child_category do |item|
  link item.category.parent.name, root_path
  parent :parent_category, item
end

crumb :grandchild_category do |item|
  link item.category.name, root_path
  parent :child_category, item
end

crumb :current_product do |item|
  link item.name
  parent :grandchild_category, item
end

step 4: ビューの記述

    - breadcrumb :parent_category, @item
    - breadcrumb :child_category, @item, class: 'content'
    - breadcrumb :grandchild_category, @item, class: 'content'
    - breadcrumb :current_product, @item, class: 'current'
    = breadcrumbs separator: "  &rsaquo;  "

step 5: ビューの調整

cssで見た目を整えれば、、、

完成！！

かなり説明を省いてしまいましたが
公式ドキュメントに詳しい説明がありますので、是非一読を！
【参考記事】
パンくずリストの実装
 【Rails】gretelを使ってパンくずリストを作成
 一番わかりやすいパンくずの実装（gem 'gretel')

gretelを用いたパンくず機能の実装方法