Create and Customize Breadcrumbs

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.



The Breadcrumbs module enables you to add another form of navigation on your website. Breadcrumbs links are commonly used on many sites, and visitors instinctively understand how to interact with them to jump quickly through the site's pages.

When you use the Site Maps module to manually organize web pages into a specific hierarchy, you can then also leverage the Breadcrumbs module to add a second form of navigation and increase your site's usability. Additionally, you can insert the Breadcrumbs module in templates, to effectively add the Breadcrumbs module functionality to every web page that uses the template.

The tag to insert the Breadcrumbs module looks like this:


The primary benefits of using the Breadcrumbs module are listed below:

  • Breadcrumbs orient visitors, to make it easy for them to understand where they are on a site as they navigate pages.
  • The system automatically generates the Breadcrumbs links for every web page where the module tag appears. The Breadcrumbs links enable visitors to traverse backwards if they wish, without clicking the Back button on their browser.
  • If you later change the web page hierarchy, the Breadcrumbs module automatically updates to reflect the new site hierarchy; the links are not broken and do not need to be manually updated.

Understanding how Breadcrumbs are displayed

The following screenshot illustrates how the Breadcrumbs module can be used as navigation:

In the example above, the visitor is currently on the home page and has clicked the link in the left sidebar to Find a training consultant. The purple breadcrumb navigation is therefore generated automatically, to display the page links:

Home : Find a Training Consultant

If the visitor want to return to the main screen of the home page, they can click the word Home in the Breadcrumb and backtrack to the parent page of the page they are currently viewing.

Adding a character to separate the Breadcrumbs navigation item links

If desired, you can optionally add a separator within the module tag that is displayed between each menu item in the Breadcrumbs navigation.

To do this, add a tag attribute to the Breadcrumbs module tag. The generic syntax for the Breadcrumbs module tag looks like this:


In actual practice, you'll enter the character that you want to display between the links in place of the word Separator, like this:


When adding the Separator parameter, keep in mind it can be any text symbol, such as a greater than symbol (>) or a dash (-). The default separator is the colon symbol (:).

For example, if you placed the module tag in a template, and the tag looks like this:


When you save and publish the template and view the live site, the navigation link would use the greater than (>) separator. Using the Breadcrumbs links shown in the screenshot above, the updated Breadcrumbs links would look like this:

Home > Find a Training Consultant

Adding Breadcrumbs navigation in the catalog of an online store

To add the Breadcrumbs module in a store catalog, follow these steps:

  1. Choose Site Manager > Module Templates.

  2. In the page that appears, click the Online Shop Layouts icon. 
  3. In the list of layouts that appears, select the Overall Layout. The layout appears in the online editor.
  4. Enter the following tag at the desired location in the layout source code
  5. {tag_catalogbreadcrumbs} 
  6. {tag_catalogbreadcrumbs} Note: The catalog breadcrumb module is designed to only display a catalog level and not product level.