Liquid Breadcrumbs - based off URL
Liquid snippet to generate breadcrumbs for pages and module items based off the URL structure.
-
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 sureService 1
page is found in theServices
Folder OR is in a module that usesservices
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>
-
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 forservices
and assign it a landing page ofour-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.