CODE

Liquid Breadcrumbs - based off URL

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

Tim Lochmüller's:
CODE Items Profile

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>

   OPTIONAL:
   You can add the Page module component (or the module relevant to your items) to look up the actual Page items and display the item’s name (or other data) instead of just the URL value.

   <!-- Treehouse CODE v1.0.0 -->
   <ul class="breadcrumb">
   	<li class="breadcrumb-item"><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 %}<!-- Getting complete URLs for linking pages also in sub sub directories -->{% endcomment %}
   		{% assign leftPartUrl = request.request_url.path | split: i %}
   		{% assign crumbUrl = leftPartUrl[0] | append: i %}
   
   		{% comment %}<!-- Handling the clean output and final link label to use page name rather than a cleaned url -->{% endcomment %}
   		{% if forloop.last %}
   			<li class="breadcrumb-item active" aria-current="page">{{crumbLabel | truncate: 30, " ..." }}</li>
   			{% else %}
   			{% component source: "Page", layout: "", filterBy: "UrlSlug", filterValue: "{{i}}", limit: "1", enablePagination: "false", type: "module", collectionVariable: "PageName" %}			
   			<li class="breadcrumb-item"><a href="{{crumbUrl}}">{{PageName.items[0].Name}}</a></li>			
   		{% endif %}
   		
       {% endfor %}
   	
   </ul>

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