CODE

Liquid Breadcrumbs - based off URL

Liquid snippet to generate breadcrumbs for pages and module items based off the URL structure.

James Hall's:
CODE Items Profile

v1.0.0

1. This works based on the assumption that your site structure matches your page/module structure.

   Example: To get Home -> Services -> Service 1 you need to make sure Service 1 page is found in the Services Folder OR is in a module that uses services as the base URL.

   Place the below code where you want your breadcrumbs to display.

   <!--Treehouse CODE v1.0.0-->
   <ul class="breadcrumbs">
   	<li><a href="/">Home</a></li>
   	
   	{% comment %}<!-- Assign Variables -->{% endcomment %}
   	{% assign urlArray = request.request_url.path | split: "/" %}
   	{% assign crumbLabel = this.name %}
   	{% assign crumbUrl = "" %}
   	
   	{% for i in urlArray %}
   	
   		{% comment %}<!-- Handling the Link to adjust the sublink(folder?) to a specific page url -->{% endcomment %}
   		{% case i %}
   			{% when "services" %}
   				{% assign crumbUrl = "our-services" %}
   			{% when "anotherPossibleSubDirectory" %}
   				{% assign crumbUrl = "another-subdirectory-landing-page" %}
   			{% else %}
   				{% assign crumbUrl = i %}
   		{% endcase %}
   
   		{% comment %}<!-- Handling the clean output and final link label to use page name rather than a cleaned url -->{% endcomment %}
   		{% if forloop.last %}
   			<li>{{crumbLabel}}</li>
   			{% else %}
   			<li><a href="/{{crumbUrl}}">{{i | replace: "-", " "}}</a></li>
   		{% endif %}
   		
       {% endfor %}
   	
   </ul>

2. Modification: Below you will find a liquid case block, which you can use to change the sublevel url to link to the landing page of your choice.
   Why?
   Because in treepl you can't assign a landing page to a module "directory". So in the case below we look for services and assign it a landing page of our-services for the breadcrumb link.

   If you would like to add additional cases you just need to repeat each case and change accordingly:
   Note: this needs to be placed before the {% else %} call in the case block above.

   <!--Treehouse CODE v1.0.0-->
   {% when "subDir1" %}
       {% assign crumbUrl = "subDir1-landing-page" %}
   {% when "subDir2" %}
       {% assign crumbUrl = "subDir2-landing-page" %}

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.