Better HubSpot Breadcrumbs

The standard way for creating breadcrumb links on your page in HubSpot is to use a menu module with the breadcrumb menu type selected. This requires you to create a menu and select every page you want to include in the breadcrumbs. This can take a whole lot of time, especially if you have a larger website. Don’t have the time for that? No worries, we’ve got a better solution.

The Better Breadcrumbs Approach

Structured URLs

If you are using breadcrumbs, typically this means you have multiple levels of pages which means you should have structured URLs. An example of a properly structured multi-level URL looks like this: www.example.com/milky-way-galaxy/solar-system/earth

If you don’t have structured URLs, this method won’t work for you. Also, why don’t you have structured URLs?!?! If you do have structured URLs, read on… 👇

Breakdown the URLs with HubL

To get your URL path in HubL we will use the {{ request.path }} global variable. This variable grabs everything after your domain name so using the example above we would get: milky-way-galaxy/solar-system/earth

Create the Array

We need to separate each level so we can link to them individually in the breadcrumb’s menu. To do this we’ll use the split filter. This filter creates an array (multiple items) from a string (a single item). Since our URL uses / for each level, we can easily split the single long string into multiple items like so: {{ request.path|split('/') }}

Loop through the Array

Now that we have our array, we need to loop through each item to build our menu. In order to do this we need to save the array as a variable and then use that variable in the for loop. In HubL, that looks like this:

{% set breadcrumbs = request.path|split('/') %}
<ol>
  {% for item in breadcrumbs %}
    <li>{{ item }}</li>
  {% endfor %}
</ol>

Add Formatting and Links

Next, we’ll want to link to the parent pages, replace dashes with spaces for the text as well as capitalize the text for better readability.

{% set breadcrumbs = request.path|split('/') %}
<ol>
  {% for item in breadcrumbs %}
    <li>
      {% unless loop.last %}
        <a href="/{{ item }}">{{ item|replace('-',' ')|capitalize }}</a> / 
      {% else %}
        {{ item|replace('-',' ')|capitalize }}
      {% endunless %}
    </li>
  {% endfor %}
</ol>

And that’s it!

The Better Breadcrumbs Gotchas and Downsides

The main drawback to this approach is if you don’t have a complete name in your URLs your text might not read very fluently. The other drawback is if you actually need dashes in between the words in your text, you won’t be able to have them. If either of these are issues for you, you should use the regular menu method. Otherwise, go make yourself that extra coffee with all that time you just saved yourself. ☕️☕️☕️

Comments

Chad says

This is a very cool way of doing Breadcrumbs, I would be cognizant of the fact that when you use {{ request.path }} you are breaking server caching for that page some what. BUT this does make breadcrumbs super flexible.

Add a comment