Drag and Drop Navigational Breadcrumbs

Add This Free Breadcrumbs custom module to Your HubSpot Page to Easily Add a secondary navigation element to your website, blog or landing pages.

Module Demo  Get FREE HubSpot Module Documentation


Module Demo


Choose Different Separators


Frequently Asked Questions

Steps How to add a Jake Addons custom module to a page.

  1. In your HubSpot account, navigate to Marketing > Website > Website Pages.
  2. Hover over a page and click Edit.
  3. In the content editor sidebar on the left of the window, locate the search box and type "jake"
  4. Next, select a module that appears in the All Modules section
  5. Click a module and drag it into position on the page.

How do I add this HubSpot module to a page?

Some pages you create will require an image gallery or tab content, but others will not. HubSpot modules give you the control to add new functionality to only the pages you need without impacting the rest of the pages on your website. These modules are added to drag-and-drop areas or sections when editing a page. If you are more familiar with WordPress, they are like blocks or plugins in that CMS.
Have a question? Contact Me

Module Documentation

Content Tab

Page Links (repeater field)

Text: Add the page you would like the link item to link to

Link Text: Add the text for the link item

Styles Tab


Full Width Container: By default, the container spans the width of the number of links. Check this to make it always be 100% wide.

Background Color: Change the container background color

Border: Add a border to the container

Border Radius: Add rounded corners to the container

Spacing: Adjust the padding and margin around the separator


No Link on Last Item: The last item in breadcrumbs is usually the page you are viewing, so it is often not linked. Uncheck this to turn off this default behavior. This way this module could be used as a list of links.

Remove Text Underline: Remove underlines on text.

Link Font: Change the font for all links

Active Text Font: Adjust the font for the last link in the list

Breadcrumb Separator

Link Separator: Choose what character to show between links

Color: Adjust the color of the separator

Spacing: Adjust the padding and margin around the separator