Latest Posts:
Search for:
SimiCart Blog | Empowering Ecommerce Growth with Mobile Solutions since 2011
Magento Tutorials

How to Show Breadcrumbs for CMS Pages in Magento 2

4 Mins Read

What is Breadcrumbs?

Breadcrumbs is basically a path to your product. It is a useful navigation tool to help your customers identify in which category or subcategory the current product is.

magento breadcrumb example
Magento Breadcrumb example

How to Enable Breadcrumbs for CMS pages

  1. Log into your Magento Admin Panel with your username and password
  2. Navigate to System > Configuration > Web > Default Pages
  3. On Show Breadcrumbs for CMS Pages, choose Yes to get Breadcrumbs enabled
  4. Click on Save Config button to complete the process

magento 2 breadcrumb setting
Enable Breadcrumbs for CMS Pages on Magento 2

Although the built-in Magento SEO does allow breadcrumbs, there are still several restrictions. Luckily, Magento 2 SEO plugin builds on basic capabilities and includes more sophisticated ones to optimize your website for both users and search engines. Specifically, this extension determines how the two types of breadcrumbs—Use Short URL Path and Use Long URL Path—are shown. It also helps you customize breadcrumbs based on category priority ID.

How to disable Breadcrumbs for all CMS Pages

To disable breadcrumbs for all CMS pages, we can just follow the same steps as above, and choose No on Show Breadcrumbs for CMS Pages, like so:

  1. Log into your Magento Admin Panel with your username and password
  2. Navigate to System > Configuration > Web > Default Pages
  3. On Show Breadcrumbs for CMS Pages, choose No to get Breadcrumbs disabled
  4. Click Save Config button to complete the process.

However, what if we want to disable breadcrumbs for a specific CMS page? This is when things get tricky.

How to disable Breadcrumbs for a specific CMS page

For Magento 2.3.3 and below

Step 1: Log into your Magento Admin Panel with your username and password

Step 2: Navigate to Content > Pages and choose a page that you want to remove Breadcrumbs

Select a CMS page to edit

Step 3: In Page Information, choose Design and your preferred Layout. Fill the below code in Layout Update XML to remove Breadcrumbs

<default>
<remove name="breadcrumbs" />
</default>
Update layout in Magento 2
Update layout in Magento 2

Step 4: Click on Save Config button to complete the process.

For Magento 2.3.4 and above

Starting with Magento 2.3.4, the Layout Update XML field in Magento Admin Panel is now converted into a selector, which means you can no longer freely add code into this field anymore. Instead, we’d have to place a .xml file containing the necessary layout updates in a specific folder in our Magento directory.

The filenames of these XML files follow this format: 

cms_page_view_selectable_<CMS Page Identifier>_<Name for Layout Update>.xml

For demonstration purpose, we’ll remove the breadcrumbs in our About Us page:

Default About Us page in Magento
The default About Us page

Our XML file will have the following filename: cms_page_view_selectable_about-us_test.xml, where:

  • about-us is the <CMS Page Identifier> (which is your page’s URL key)
  • test is the <Name for Layout Update>  
Located in Content > Pages > About Us > Search Engine Optimization, about-us is our CMS page identifier

And in order to remove the Breadcrumbs for our About Us page, we’ll need to fill our cms_page_view_selectable_about-us_test.xml file with the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
        <referenceBlock name="breadcrumbs" remove="true"/>
        <referenceBlock name="page.main.title" remove="true"/>
     </body>
 </page>

This will remove both your CMS page’s main title and breadcrumbs. Put this file in (your_Magento_root)\vendor\magento\theme-frontend-luma\Magento_Theme\layout, and clear cache using: 

php bin/magento cache:flush

If you did everything correctly thus far, you’ll now see a selectable test option in your Magento Admin Panel (Content > Pages > About Us > Design > Custom Layout Update).

New selectable custom layout update


Select test and then Save configuration. Refresh your frontend and you’ll now see that our About Us page no longer has breadcrumbs and title.

The About us page after removing breadcrumbs and title
The About us page after removing breadcrumbs and title

And in case you want to undo the changes, simply select No update from the Custom Layout Update selector.

We hope this tutorial has helped you with configuring Breadcrumbs for CMS pages in your Magento website. If there’s any part that you think was outdated, feel free to shoot us a feedback in the comment section below!

Avatar

Related Posts