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

### 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?

| 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.