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.
After writing, execute the following
$ bundle install
This completes the installation.
Create a file to set the breadcrumb trail with the following command.
$ rails generate gretel:install
Then a file like this will be created.
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.
#Management screen crumb :root do link "Home", admin_dashboard_path end #List of articles) crumb :admin_articles do link "article", admin_articles_path end
crumb :(Configuration file) do link "(Name displayed in the breadcrumb trail)",(Caller's path) end
Here, the crumb: admin_articles do described in breadcrumbs.rb is connected.
- breadcrumb :admin_articles
A breadcrumb trail will be displayed in the places listed below.
Finally, the display method with additional hierarchies is described as shown below.
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.
【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