[Rails] Creating a breadcrumb trail using Gem gretel

What is a breadcrumb trail in the first place?

The breadcrumb trail is a list in which pages are arranged in a hierarchical order as shown in the photo below, and the user's current position during operation is visualized. Such a list is called a positional breadcrumb trail.

There is also a list that shows what kind of category the page belongs to, instead of showing the page hierarchically called the attribute type breadcrumb trail. An example of an attributed breadcrumb trail is an EC site.

Introducing the breadcrumb trail has the following three main merits. ・ Improved operability → Users can always check the location information on the site.

Improvement of staying time → The breadcrumb trail makes it easier to move between levels and improves migration.

SEO effect → Support crawler patrols with a breadcrumb trail.

gretel installation

【document】 https://www.rubydoc.info/gems/gretel

【GitHub】 https://github.com/lassebunk/gretel

In Gemfile

gem 'gretel'

After writing, execute the following

$ bundle install

This completes the installation.

Setting

Create a file to set the breadcrumb trail with the following command.

$ rails generate gretel:install

Then a file like this will be created.

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

This time we will implement a breadcrumb trail on the management screen of the blog application, so describe it as follows.

config/breadcrumbs.rb

#Management screen
crumb :root do
  link "Home", admin_dashboard_path
end

#List of articles)
crumb :admin_articles do
  link "article", admin_articles_path
end

Code description

config/breadcrumbs.rb

crumb :(Configuration file) do
  link "(Name displayed in the breadcrumb trail)",(Caller's path)
end

View settings

Here, the crumb: admin_articles do described in breadcrumbs.rb is connected.

admin/articles/index.html.slim

- breadcrumb :admin_articles

A breadcrumb trail will be displayed in the places listed below.

layouts/admin.html.slim

== breadcrumbs 

Parent settings

Finally, the display method with additional hierarchies is described as shown below.

config/breadcrumb.rb

crumb :root do
  link "Home", admin_dashboard_path
end

crumb :admin_articles do
  link "article", admin_articles_path
end

crumb :edit_admin_article do
  link "Article editing", admin_articles_path
  parent :admin_articles
end

In addition to the breadcrumbs added to "Articles" earlier, this time we added breadcrumbs called "Article Editing". The difference from the last time is that parent: admin_articles is described in the article edit column to link the article with the article edit.

Finally, admin / articles / edit.html.slim can also implement breadcrumbs after setting the view.

List of referenced pages

【document】 https://www.rubydoc.info/gems/gretel

【Flexible Ruby on Rails breadcrumbs plugin.（GitHub）】 https://github.com/lassebunk/gretel

[Create a breadcrumb trail with gretel] https://doruby.jp/users/kisuzuki/entries/gretel%E3%81%A7%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90