Table of contents
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.
How to Enable Breadcrumbs for CMS pages
- Log into your Magento Admin Panel with your username and password
- Navigate to System > Configuration > Web > Default Pages
- On Show Breadcrumbs for CMS Pages, choose Yes to get Breadcrumbs enabled
- Click on Save Config button to complete the process
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:
- Log into your Magento Admin Panel with your username and password
- Navigate to System > Configuration > Web > Default Pages
- On Show Breadcrumbs for CMS Pages, choose No to get Breadcrumbs disabled
- 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
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>
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:
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>
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).
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.
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!