Breadcrumbs

Overview

The Breadcrumbs module is a simple yet powerful navigation element that helps users understand their location within your website's structure. Designed for websites built on HubSpot, this module provides a clear, linear path back to previous pages, enhancing the overall user experience and improving SEO.

This module allows you to manually define breadcrumb links for each page, giving you full control over the navigation trail without relying on automatic generation. With clean styling, responsive design, and theme flexibility, it’s an ideal addition to websites looking to improve usability and maintain a consistent site hierarchy.

Module Name: Breadcrumbs
Module Live Preview: https://straightgrowth-4886091.hs-sites.com/breadcrumbs-live-module

Getting Started

Before using the Breadcrumbs module, ensure that you have access to your HubSpot account and have the necessary permissions to edit your website pages.

Key Features

1. Adjust Content and Styling: Customise breadcrumb labels, text, separators, spacing, and colours to match your website’s brand and layout.
2. Add Repeaters: Use the repeater option to dynamically add or remove breadcrumb items, making it flexible for multi-level site structures.
3. Responsive Across Devices: Fully responsive design ensures breadcrumbs look seamless across desktop, tablet, and mobile devices.

Installation

1. Log in to your HubSpot account.
2. Navigate to the Marketplace and search for the "Breadcrumbs" module.
3. Install the module to your HubSpot account.

How to Use the Module

Step 1: Add the Module to Your Page

• Navigate to the HubSpot page editor.
• Drag and drop the Breadcrumbs Module into your layout from the module sidebar.

Step 2: Configure Your Breadcrumbs

• Use the repeater field to add individual breadcrumb items.
• Enter the text and URL for each item.
• Reorder as needed to reflect the page hierarchy.

Step 3: Customise the Design

• Choose from different separator styles (e.g., ">", "/", "|").
• Adjust typography, colour, and spacing to suit your theme.
• You can disable linking on the last breadcrumb item (current page).

Step 4: Preview & Publish

• Click Preview to ensure your breadcrumb trail displays correctly.
• Once satisfied, hit Publish to make it live.

Module Compatibility

✅ Compatible with all HubSpot CMS Hub subscriptions.
✅ Works with both default and custom themes.

Adding Breadcrumbs Module to Your Page

Follow these steps to add the Breadcrumbs module to your HubSpot website page:

1. Edit the page where you want to add the Breadcrumbs module.
2. Click the (+) icon to add a new module.
3. Search for " Breadcrumbs" and select it from the list of available modules.
4. Customize the module settings according to your preferences.

Available Fields:

Content - this group of fields is responsible for the module contents

Styles - this group of fields is responsible for the module styling

Best Practices

To maximize the impact of the Breadcrumbs module on your HubSpot website, consider the following best practices:

• Keep page titles and links concise and informative.
• Experiment with different hover effects and button placements to find what works best for your content.
• Regularly review and update your Breadcrumbs modules to keep your website fresh and engaging.
• Consistent styling: Match font and colour with your site design for a seamless look.

Get Free Support

Need help setting up the module or customising it further?
We offer FREE 1-hour support for all our HubSpot modules.

Mail Us: resource@straightgrowth.com

Visit Website: https://www.straightgrowth.com/

👉 Book Your Free Support Session with Straight Growth