A single person on a hillside trail overlooking a valley

Take in the View: Adding Custom Breadcrumb Path to Custom and Cloned Views

Is this the solution you are looking for?

If you are reading this, then it is likely that you have created a custom view page or have duplicated a protected SiteFarm view page and the breadcrumb is not formatted to your liking. Breadcrumbs will list the links in a path dictated by their placement in a menu structure. So first explore placing your view in the menu structure to achieve your desired results before pursuing the following solution.

If you're still reading, then placing the view in the menu structure was not a viable solution. Since you desire to use the breadcrumb in a way in which it was not designed to function you will be manually creating the breadcrumb trail and will be assuming responsibility for it's accuracy and maintenance in the case that links within the breadcrumb trail change URL, change page titles, or the view page itself is moved. You may want to document your work in your themes README file so others down the road are aware of the maintenance required in this customization.

Overriding the Breadcrumb

Still with me? Great. A requirement for the following work is a SiteFarm subtheme. Within your subtheme you will be overriding the parent themes breadcrumb template, breadcrumb.html.twig. To do this you will need to gather some information to properly structure the template name. At the very lease you will need the machine name of your view, and likely the machine name of your display.

Find Your View's Machine Name
View Machine Name
You can find the machine name of your view on the edit page for that view in the address bar of your browser.
Find Your View Display Name
Get your view's display name
Find your display's machine name in the advanced settings of your view.

Create a directory within your subtheme named templates. Within this directory place your breadcrumb template override file. You have two override options. Override the breadcrumb of all page displays within your view, or a single display.

To override all displays you will structure your template name as such: breadcrumb--VIEW-NAME.html.twig. So in the case of my above example my template file name would be, breadcrumb--duplicate-of-person-directory.

To override a specific display in your view name your template: breadcrumb--VIEW-NAME--DISPLAY-NAME.html.twig. So in the case of my above example the template name for the display page_1, would be breadcrumb--duplicate-of-person-directory--page-1.html.twig.

* Note that the underscores in the machine names need to be replaced with dashes in the template file name.

Now copy and paste the code from your parent theme's breadcrumb.html.twig file into your own. You should be able to find this in the site backup your made when subtheming. The path should be:

YOUR_LOCAL_SITE/docroot/themes/contrib/sitefarm_one/templates/navigation/breadcrumb.html.twig.

Customizing the Path

In your new template you will see a for loop that is outputting the breadcrumb items within <li> elements.

  • <ol class="breadcrumbs">
  • {% for item in breadcrumb %}
    • <li>
      • {% if item.url %}
        • <a href="{{ item.url }}">{{ item.text }}</a>
      • {% else %}
        • {{ item.text }}
      • {% endif %}
    • </li>
  • {% endfor %}
  • </ol>
  • Remove the loop and replace it with your own custom path.
  • <ol class="breadcrumbs">
    • <li><a href="/">Home</a></li>
    • <li><a href="/some-page">Some Page</a></li>
    • <li>Current Page</li>
  • </ol>

In Summary

You should now have a template file inside your theme structure.

  • your_theme_name
    • templates
      • breadcrumb--view--view-name--view-display-name.html.twig

The contents of the breadcrumb.html.twig file in the sitefarm_one theme should have been copied into breadcrumb--view--view-name--view-display-name.html.twig and the breadcrumb list customized to your choosing.

After all of this make sure to clear your cache. After that your view should be displaying your custom breadcrumb.

Primary Category

Tags