--- title: Better HubSpot Breadcrumbs description: Better HubSpot Breadcrumbs image: https://corporate.kelp.agency/hubfs/Imported%20images/Better-HubSpot-Breadcrumbs.png --- [![Kelp Creative Agency](https://corporate.kelp.agency/hs-fs/hubfs/Kelp_H_Logo_Color_Primary_Simple-PNG.png?width=120&height=61&name=Kelp_H_Logo_Color_Primary_Simple-PNG.png "Kelp Creative Agency")](https://corporate.kelp.agency/) Menu - [Home](https://corporate.kelp.agency) - About - [Who We Are](https://corporate.kelp.agency/who-we-are) - [What We Do](https://corporate.kelp.agency/what-we-do) - [Landing Page](https://corporate.kelp.agency/landing-page) - [Blog](https://corporate.kelp.agency/blog) - [Contact](https://corporate.kelp.agency/contact) # Corporate Blog Select a Topic HubSpot How-Tos Company News Design Dives Featured Content Creation WordPress Strategy Struts Web Development Subscribe [Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fbetter-hubspot-breadcrumbs) [Share via Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fbetter-hubspot-breadcrumbs&text=Better+HubSpot+Breadcrumbs) [Share via Email](mailto:?subject=Better+HubSpot+Breadcrumbs&body=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fbetter-hubspot-breadcrumbs) [Share via LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fbetter-hubspot-breadcrumbs&title=Better+HubSpot+Breadcrumbs&summary=Better+HubSpot+Breadcrumbs) ![](https://corporate.kelp.agency/hubfs/Imported%20images/Better-HubSpot-Breadcrumbs.png) [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot) # Better HubSpot Breadcrumbs By [Stefen Phelps](https://corporate.kelp.agency/blog/author/stefen) on Jun 11, 2020 10:23:03 AM 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 `/blog/better-hubspot-breadcrumbs` 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: `[blog, better-hubspot-breadcrumbs]` #### 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: ```
  1. blog
  2. better-hubspot-breadcrumbs
``` #### 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. ```
  1. Blog /
  2. Better hubspot breadcrumbs
``` 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. ☕️☕️☕️ ## Related Posts [![](https://corporate.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/load-more-posts-wordpress-1136x430.gif?width=400&name=load-more-posts-wordpress-1136x430.gif)](https://corporate.kelp.agency/blog/add-load-more-posts-button-wordpress-without-plugin) [WordPress](https://corporate.kelp.agency/blog/tag/wordpress) ## [Add an AJAX Powered Load More Posts button to your WordPress Blog without a Plugin](https://corporate.kelp.agency/blog/add-load-more-posts-button-wordpress-without-plugin) Oct 13, 2018 6:47:37 PM [Design Dives](https://corporate.kelp.agency/blog/tag/design) ## [The Psychology of Color (And What It Means For Your Brand)](https://corporate.kelp.agency/blog/the-psychology-of-color-and-what-it-means-for-your-brand) Jun 12, 2018 3:46:47 PM [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot) ## [HubSpot How To: Lazy Load Images in Rich Text Modules](https://corporate.kelp.agency/blog/hubspot-how-to-lazy-load-images-in-rich-text-modules) Feb 23, 2019 5:46:52 PM ### Ready to take your business to the next level? Schedule a free consultation today. Learn More about {{item.heading}} - [Home](https://corporate.kelp.agency) - About - [Who We Are](https://corporate.kelp.agency/who-we-are) - [What We Do](https://corporate.kelp.agency/what-we-do) - [Landing Page](https://corporate.kelp.agency/landing-page) - [Blog](https://corporate.kelp.agency/blog) - [Contact](https://corporate.kelp.agency/contact) © 2026 Kelp Creative Agency, All Rights Reserved.