Liquid Breadcrumbs - based off URL

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

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.