はじめに

Railsアプリのヘッダー部分にパンくずリストを追加しました。忘れないように書き記します。

開発環境
ruby 2.6.5
Rails 6.0.3.4

1.Gemの導入

gretelというGemを使用する。下記Gemfileに追記後、ターミナルで忘れずにbundle installを実行する。

Gemfile

gem "gretel"

2.パンくずの設定

パンくずの設定を書き込むbreadcrumbs.rbファイルを作成する。作成方法は下記のようにターミナルでコマンドを実行する。

ターミナル

rails g gretel:install

今回下記のような4層でパンくずリストを構成する。
トップページ > 掃除提案 > 登録一覧 > 掃除箇所の登録

config/breadcrumbs.rb

crumb :root do
  link "トップページ", root_path
end

crumb :clean_suggestions do #ページの名前
  link "掃除提案", clean_suggestions_path　#リンク名、リンク先ページ
  parent :root
end

crumb :suggestions do
  link "登録一覧", suggestions_path
  parent :clean_suggestions
end

crumb :new_suggestion do
  link "掃除箇所の登録", new_suggestion_path
  parent :suggestions
end

各ヘッダーのビューにパンくずリストを追記する。なお「separator: " > "」はリスト間に「>」を挿入する。これによりブラウザ上に表示される。

トップページのヘッダー.html.erb

<%= link_to "トップページ", root_path, class: :logo %>
<% breadcrumb :root %>

掃除提案のヘッダー.html.erb

<% breadcrumb :clean_suggestions  %>
<%= breadcrumbs separator: " > " , class: :logo %>

登録一覧のヘッダー.html.erb

<% breadcrumb :suggestions  %>
<%= breadcrumbs separator: " > " , class: :logo %>

掃除箇所の登録のヘッダー

<% breadcrumb :new_suggestion  %>
<%= breadcrumbs separator: " > " , class: :logo %>

3.CSSの設定

logoクラスは「>」に適用される。現在のページを表す部分は自動的にcurrentクラスが割り当てられている。下記記述により、現在のページを太字とし、それ以外にカーソルを合わせると色が変わるようになる。

header.css

.logo {
  margin-left: 3vw;
}

.logo a {
  margin-right: 0.5vw;
}

.current {
  font-weight: bold;
  margin-right: 1vw;
}

.logo:hover,.logo a:hover {
  color: Chocolate;
}

以上

Rails パンくずリストの作成

はじめに

目次

1.Gemの導入

2.パンくずの設定

3.CSSの設定