Breadcrumbs when adding folders

[luke]

When adding breadcrumbs and you have a folder how would you add that.

I grabbed the code off treehouse resources but is there a better way then adding it manually.

<nav aria-label="breadcrumb">
   <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a class="link-dark" href="/">Home</a></li>

      {% assign urlArray = request.request_url.path | split: "/"%}
      {% assign crumbLabel = this.name | capitalize %}
      {% assign crumbUrl = "" %}

      {% for i in urlArray %}

      {% case i %}
      {% when "skip bins" %}
      {% assign crumbUrl = "/skip-bins" %}
      {% when "waste management" %}
      {% assign crumbUrl = "/waste-management" %}
      {% else %}
      {% assign crumbUrl = i %}
      {% endcase %}

      {% if forloop.last %}
      <li class="breadcrumb-item text-muted">{{crumbLabel | capitalize | replace: "-", " " }}</li>
      {% else %}
      <li class="breadcrumb-item"><a class="link-dark" href="/{{crumbUrl}}">{{ i | capitalize | replace: "-", " " }}</a></li>
      {% endif %}

      {% endfor %}

   </ol>
</nav>

[Adam.Wilson]

Hi @luke
Could you clarify what you mean by “adding it manually”?
Once this code is added, it will produce the breadcrumbs automatically.

Also, your case conditions I don’t think will work since the urlArray is already in URL format, so the when conditions won’t match (and don’t need to).

[TimL]

I think what @Luke wants to achive is a breadcrump code which uses actual page names instead of url slugs. I rewrote the code from Treehouse a bit and added a component call for the Pages module to source the page names:

<!--Treehouse CODE v1.0.0-->
<ol 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 %}<!-- New by tl: 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 %}
	
</ol>

[Adam.Wilson]

Thanks @TimL !
Are you happy for me to add this to the Treehouse code as an option?

[TimL]

@Adam.Wilson Yeah, sure!

[luke]

Sorry for the delay guys.

Yes @TimL that’s what I was talking about.

I tried the code and it works perfect! but is there a way to stop it from loading the top level

as below services and skip bins are folders but I wont be using services as a page only as a folder to organise the pages

example
services / skip bins / our serviceable locations