Custom Drupal 8 Breadcrumb - Step wise tutorial

15 Nov 2017
Drupal 8 Breadcrumb

This article is about generating Drupal 8 breadcrumb. Breadcrumbs are very important part of any website, as it helps in SEO as well and provides users a path to navigate. By default in Drupal 8, Breadcrumb doesn't show page title, sometimes we want to have that on the breadcrumb. I have seen some Drupal 8 modules as well, but those didn't helped me in generating custom breadcrumb. Here you will find, code snippet screenshots and detailed explanation of them, which will help in in generating custom breadcrumb. Now in Drupal 8, we can overwrite the default breadcrumb with help of a custom module. Let's dive in, and see the process of generating breadcrumb.

Generate Custom Drupal 8 Breadcrumb

Create a custom module and inside that module create service yml file for breadcrumb. Here in this example I have created a module (blog_breadcrumb). And it has a blog_breadcrumb.services.yml file, which looks like this:

drupal 8 breadcrumb service yml file

Here, the line number 2 has content.breadcrumb. Which should be unique, and next line has path to class where breadcrumb logic will exists. And the last thing about this yml file. tags, this is where we are telling Drupal that we are going to create a breadcrumb. You can see tags has name "breadcrumb_builder" and priority, (This is required for creating custom breadcrumb).

Add Logic for your breadcrumb

Now, create a php file blog_breadcrumb/src/Breadcrumb/ContentBreadcrumb.php and create a class with the name of the file. Here, the class name will be ContentBreadcrumb. In this example we are going to generate breadcrumb for all the nodes with the content type and node title in breadcrumb. So, the structure will be like "Home >> [Content Type Name] >> [Content Title]". Now, to generate a breadcrumb we need to write 2 methods inside the class.

  1. public function applies(RouteMatchInterface $route_match)
  2. public function build(RouteMatchInterface $route_match)

The first method is tell Drupal on which URLs this breadcrumb will apply. And second method has the actual logic to generate the breadcrumb.

Breadcrumb Logic PHP file

Here, you can see in the first method, I've added a condition to generate breadcrumb only for node pages. And in the second method I have added the breadcrumb items in the breadcrumb object.

$breadcrumb->addLink(Link::createFromRoute('Home', '<front>'));

In the line above you can see, "Home" and "<front>". Similarly you can add other breadcrumb elements, only thing you need to know for this is first argument is the Text that you want to appear and the other one is route_name. Route name is different from URL. You can get the list of all the available route name with help of Webprofiler module of Devel. Just enable these this and go to "devel/routes". And it will list all the route names of the system. One Last thing, remember to add:

$breadcrumb->addCacheContexts(array('url'));

This will help to avoid caching of breadcrumb on all pages.

This article will help you to generate Drupal 8 breadcrumb from code, which will give you full control over your breadcrumb. For more technical stuffs visit here.