Get Started

Marketing Web Modules

Back to All Modules

Breadcrumbs

Search (CSOL) Breadcrumbs in the CMS

Jump to Guidelines and Use Cases

Theme Options:

Module Preview
Module Preview

FAQ's

How To Use This Module

Guide your visitors through multiple pages from the website’s structure, enabling easy page exploration and providing contextual understanding. Best practices include using concise labels, organizing links in a logical order, and implementing responsive design for optimal user engagement

Use Cases

Custom Breadcrumb Links

Add up to 5 breadcrumb links with custom text and URLs (external, blog, or content pages). Links appear in the order defined by content creators.

Current Page Display

Optionally include the current page as the final breadcrumb item with automatic or custom text. When enabled, the page name is used by default unless custom text is specified.

SEO Schema Markup

The module supports optional BreadcrumbList schema markup to help search engines understand page hierarchy:

  • Schema Markup Field: Dropdown to enable/disable BreadcrumbList JSON-LD schema
  • Automatic Generation: When enabled, generates valid schema including all visible breadcrumb links
  • Current Page Support: Includes the current page in schema when "Include Current Page" is enabled
  • Compliant Format: Follows schema.org/BreadcrumbList specification
  • Include Site Root in Schema Only: When enabled (default), the site's root URL is added as the first item in the BreadcrumbList schema. The label is localized based on the page language ("Startseite" in German, "Accueil" in French, "Inicio" in Spanish, "Início" in Portuguese, "ホーム" in Japanese, "Home" for all others). On `offers.hubspot.*` domains, the item URL points to the corresponding localized HubSpot marketing domain (e.g. `www.hubspot.de`) rather than the current request domain. If an existing breadcrumb already links to the site root, it is automatically excluded from the schema to prevent duplication. This affects schema only — the visible breadcrumbs are unchanged.

Overlay Display Mode

Enable overlay mode to position breadcrumbs over the module below, creating a seamless visual integration. Theme must match the underlying module for proper contrast.

Guidelines

Character Count

  • Recommended Breadcrumbs link character count is ~28 characters

Link Count

  • The module provides the option to add up to 5 links inside a Breadcrumbs component, with the option to include the current page

Things to Know

  • Breadcrumbs links are mandatory
  • Toggle to include current page is optional
  • Toggle to enable overlay display is optional
  • As the Breadcrumbs module is likely to be paired with a Page Header module, its background options match those of a CSOL Page Header, featuring White, Light, Neutral and Dark background themes.
  • On Tablet and Desktop, all Breadcrumbs links will be visible, if they fit inside the viewport, otherwise, they will be truncated.
  • On Mobile, only the “previous page” links is displayed

Similar Modules

Fixed Secondary Navigation

Sticks to the top of your page and provides a collection of useful links.

Tabs

Add tabs on your page to group related content within the same page.

Chapters

Allows you to navigate within a long page more easily.

What's New?

| v5.15.0 June 2026

  • Added Include Site Root in Schema Only option (enabled by default) to the SEO Schema Markup settings. When active, the site root is prepended as the first item in the BreadcrumbList schema, and any existing breadcrumb that already links to the site root is automatically deduplicated. The visible breadcrumbs are unaffected.
  • The site root schema label is now localized based on page language (de/fr/es/pt/ja supported; falls back to "Home").
  • On `offers.hubspot.*` domains, the site root schema item links to the corresponding localized HubSpot marketing domain (e.g. `www.hubspot.de`) instead of the current request domain.

| v2.12.0 July 2024

  • This module now has the option to enable overlay display so breadcrumbs will be displayed overlayed on top of the module that follows and with no bottom padding, creating a seamless look.