rails パンくずリストの作り方（gem 'gretel'）

今回は業務の中で初めてパンくずリスト機能に触れたので、こちらについて勉強したことをまとめます。

パンくずリストとは？

パンくずリスト（Breadcrumbs）は、Webサイトのナビゲーション要素の一つで、ユーザーが現在のページに至るまでの階層構造やパスを表示するためのものです。パンくずリストは、ユーザーが現在どの位置にいるのかを視覚的に示し、上位のページや関連するカテゴリーに簡単に戻れるようにするために利用されます。

実装方法

では実際にはどのように実装をするのか？

まず、下記のgemを使用します。

gem 'gretel'

このgemの名前の由来は、グリム童話の「ヘンゼルとグレーテル（Hansel and Gretel）」に登場するキャラクター、グレーテル（Gretel）から来ています。

「ヘンゼルとグレーテル」は、グリム兄弟によって記録された有名なドイツの民話です。物語の中で、ヘンゼルとグレーテルは森の中に置き去りにされますが、パンくずを道しるべとして使って家に戻ろうとします。このパンくずが、「パンくずリスト」（Breadcrumbs）というナビゲーション手法の由来となっています。

gemfileに記述したらbundle installをします。

bundle install

実装後にはconfigフォルダに「breadcrumbs.rb」が作成されます。

中には下記のような記述がされています。
これは親記事の設定をすることができます。「"Home"」はリストで実際に表示されるテキストです。

crumb :root do
  link "Home", root_path
end

そこから子要素を作っていきます。

crumb "ページ名" do
  link "ビューに表示される名前", "リンクされるURL"
  parent :親のページ名（現在の前のページ）
end

具体例：
crumb :user_new do
  link "ユーザー登録", new_user_path
  parent :root
end

これで裏側の設定は完了です。

最後に表示したい場所に下記を設定してあげることで、適切にリストを作成することができます。
実際に設定した箇所にページ移行するとパンくずリストが表示されるようになります。

= breadcrumbs separator: ">"