[Rails] Make a breadcrumb trail

Target audience

--People who want to implement breadcrumb trails in Rails. --People who forgot how to use it. ――It is for beginners. The content also explains the rudimentary part.

What is gretel?

Breadcrumb trail. The story of Hansel and Gretel. You can see the path you have taken by dropping breadcrumbs.

Install Gem

Click here for gretel's github

Gemfile


gem 'gretel'

After bundle install, generate the necessary files.

$ bundle install
$ rails g gretel:install

It is OK if the file is generated as follows.

Running via Spring preloader in process 6675
      create  config/breadcrumbs.rb

This is the contents.

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

#
#
#Omitted below
#
#
#

Write settings

The file breadcrumbs.rb mentioned earlier is a file that can be set to drop bread crumbs. For example

Home> Category

If you want to remove breadcrumbs like

breadcrumb.rb


crumb :root do
  link "Home", root_path
end

crumb :articles do
  link "List of articles", articles_path #パスは該当ページのパスを書く(ここではList of articles)
  parent :root
end

Since we want the page before the category to be Home, parent specifies : root.

Display in View

All you have to do is output it in View.

erb:application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>Bread crumb app</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= breadcrumbs separator: " &rsaquo; " %> #Add here
    <%= yield %>
  </body>
</html>

erb:articles/index.html.erb


<% breadcrumb :articles %>

with this

Home> Article List

The breadcrumb trail is ready.

I want to display the registered data without breadcrumbs

Home> Article List> [Article Title]

If you want to do something like this, you need to devise a little.

You have to send the data from View to breadcrumb.rb as shown below. This time, I want to output the title of the article as breadcrumbs, so I will pass the data by specifying @article as the second argument.

erb:articles/show.html.erb


<% breadcrumb :article_show, @article %>

breadcrumb.rb


crumb :root do
  link "Home", root_path
end

crumb :articles do
  link "List of articles", articles_path #パスは該当ページのパスを書く(ここではList of articles)
  parent :root
end

crumb :article_show do |article| #Received here
  link article.title, article_path(article) #<Character string to display>、<Article detail path>
  parent :articles  #Set parent
end

Home> Article list> I made a breadcrumb trail

If you want to output the creation date and time,

breadcrumbs.rb


crumb :article_show do |article|
  link article.created_at, article_path(article) #Change (title=> created_at)
  parent :articles
end

If you change it to, it's OK.

Recommended Posts

[Rails] Make a breadcrumb trail
[Rails] Creating a breadcrumb trail using Gem gretel
Breadcrumb trail implementation
Make a login function with Rails anyway
Make a site template easily with Rails
[Rails] Show multi-level categories in the breadcrumb trail
Let's make a search function with Rails (ransack)
How to make a follow function in Rails
Make a reflection utility ②
Make a reflection utility ③
Make a reflection utility ①
[Rails] Creating a search box
I tried using Hotwire to make Rails 6.1 scaffold a SPA
[Java] Make it a constant
Post a video on rails
[Rails] How to make seed
Make a rhombus using Java
I tried to make a group function (bulletin board) with Rails
Make a digging maze with Ruby2D
[Rails] Make pagination compatible with Ajax
Make a language! (Making a simple calculator ②)
Try to make a simple callback
Add a search function in Rails.
Make a slideshow tool with JavaFX
How to make a Java container
[Rails Tutorial Chapter 5] Create a layout
[Rails] Creating a new project with rails new
Make a Christmas tree with swift
How to make a JDBC driver
Priority Queue max Make it a queue
Create a new app in Rails
Make a language! (JavaCC environment construction)
Make a garbage reminder with line-bot-sdk-java
Make a list map with LazyMap
Implement a contact form in Rails
How to make a splash screen
How to make a Jenkins plugin
How to make a Maven project
Make a SOAP call in C #
Try to make a peepable iterator
How to make a Java array
Make a typing game with ruby
How to implement more than one top page in Rails breadcrumb trail