This allows you to display breadcrumbs and manage its styling through color and typography options.

Here is an article that will brief you on how you can add breadcrumbs using the Astra theme and document too.

The above method focuses on three default positions – viz. inside the header, below the header and above the title.

But, what if you want to display it anywhere on the page or post? All you need to do is paste a shortcode and you see it there!

This is the shortcode – [astra_breadcrumb]

Note: To use the Breadcrumb shortcode anywhere on the page, you will need the Astra Pro plugin installed and activated.

You can add this to any custom layout or just anywhere – maybe the header, the footer, sidebar widget, within a page builder widget, etc.

The Page header module of the Astra Pro addon already adds breadcrumbs. The ones that you already have will follow the previous way. However, the ones you add now on will follow the recent Breadcrumb trail.

If you want to switch from the existing breadcrumb to the new trail, you can use the following filter.

add_filter( 'astra_addon_advanced_headers_use_astra_breadcrumb_trail', '__return_true' );

Add this code to the child theme’s functions.php file. 

How to Enable Breadcrumbs?

To enable breadcrumbs you just need to have the Astra theme installed and activated. To explore the settings, from the WordPress dashboard navigate to Appearance > Customize > Breadcrumb.

In this article, we’ll see –

• Breadcrumb Settings in Astra
• Display Breadcrumbs Anywhere with Shortcode
• Support for third party plugins

Below are the available settings for Breadcrumb

1. Position: This option allows you to choose a location to display breadcrumbs. Choose where you wish to display them. Current, you can choose to display it inside the header, after the header or before the title.
2. Separator: You can set custom separators between breadcrumb links.
3. Disable Breadcrumb on specific pages/post: You will see a list of pages and posts where you can disable breadcrumbs. These include categories, archive pages, 404 pages, etc. (You can disable breadcrumbs on individual pages and posts through the post meta settings)
4. Alignment: You can select the alignment to display your breadcrumb
5. Spacing: Adjust the spacing from all sides

Color and Typography options for Breadcrumb

By default, breadcrumbs will inherit the color and typography from the theme. But in case you wish to highlight them with different colors and typography, you have dedicated options for Breadcrumbs. In the Customizer, navigate to – Customize > Breadcrumb > Typography

Currently, Astra lets you display breadcrumbs in three places only – inside the header, after the header, before title.

What if you want to display it anywhere on the page or post? You can do that using a shortcode.

Paste this shortcode anywhere in any custom layout, text, or HTML block on your website and see the breadcrumb appear there – [astra_breadcrumb]

Along with the built-in breadcrumb feature, Astra also supports breadcrumbs from the following external plugins –

• Yoast SEO
• Breadcrumb NavXT
• Rank Math
• SEOPress PRO

You can turn off Astra’s default options and use breadcrumbs from the above plugins. Although the breadcrumbs are fetched from the above plugins, you can still manage the styling such as colors and typography through Astra.

How to Set External Plugin Breadcrumbs with Astra?

1. With Yoast SEO Plugin:

• Install and Activate the Yoast SEO Plugin
• Activate Breadcrumb for Yoast SEO Plugin from WordPress Dashboard > SEO > Search Appearance > Breadcrumbs > Enable Breadcrumbs
• You will see an option in the Customizer > Layout > Breadcrumb > Breadcrumb Source. Select Yoast SEO Breadcrumb.
• Now the Yoast SEO Breadcrumb markup should start appearing on the pages instead of the default Astra Breadcrumb.
• All Color and Typography options from the customizer will override the styling of Yoast SEO Breadcrumb.
• All options to disable breadcrumb on specific locations will also work with the Yoast SEO plugin.

Yoast Backend Settings:

Yoast Option in the Customizer:

2. With Breadcrumb NavXT Plugin

• Install and Activate the Breadcrumb NavXT Plugin
• You will see an option in the Customizer > Breadcrumb > Breadcrumb Source. Select Breadcrumb NavXT.
• Now Breadcrumb NavXT markup will start appearing on the pages instead of the default Astra Breadcrumb.
• All Color and Typography options from the customizer will override the styling of Breadcrumb NavXT.
• All options to disable breadcrumb on specific locations will also work with the Breadcrumb NavXT plugin.

3. With Rank Math Plugin

• Install and Activate the Rank Math Plugin
• Set Breadcrumbs through Dashboard > Rank Math > General Settings > Breadcrumbs
• You will see an option in the Customizer > Breadcrumb > Breadcrumb Source. Select Rank Math.
• Now Rank Math markup will start appearing on the pages instead of the default Astra Breadcrumb.
• All Color and Typography options from the customizer will override the styling of Rank Math.
• All options to disable breadcrumb on specific locations will also work with the Rank Math plugin.

4. With SEOPress (PRO) Plugin:

• Install and Activate both the SEOPress free and PRO Plugins
• Activate Breadcrumbs for SEOPress Plugin by navigating to WordPress Dashboard > SEO > PRO > Breadcrumbs. Here, follow these steps:
  • Step 1 – Enable Breadcrumbs;
  • Step 2 – Enable HTML Breadcrumbs;
  • Step 3 – Optionally, you can set the text to be shown before the Breadcrumbs by adding it to the “Display a text before the breadcrumbs” field;
  • Step 4 – Click on the “Save changes” button to activate the SEOPress Breadcrumbs.
• Navigate next to Customizer > Layout > Breadcrumb > Breadcrumb Source. Here, select the “SEOPress” option.
• Now the SEOPress Breadcrumb markup should start appearing on the pages instead of the default Astra Breadcrumb.
• All options to disable breadcrumb on specific locations will also work with the SEOPress plugin, and some additional settings will be also available at Dashboard > SEO > PRO > Breadcrumbs.

SEOPress – Enable Breadcrumbs:

SEOPress – Enable HTML Breadcrumbs:

SEOPress Option in the Customizer: