How to Add Breadcrumbs in WordPress Website with Astra

Astra is a popular WordPress theme that offers a built-in breadcrumb feature. The theme also offers various customisations with dedicated colors and typography options.

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 > General > 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. Header Position: This option allows you to choose a location to display breadcrumbs. Choose where you wish to display them. Currently, 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. Alignment: You can select the alignment to display your breadcrumb
4. Display Settings: 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)

Design Options for Breadcrumbs

You can now customize the appearance of your breadcrumbs using the options available under the Design tab in the Customizer. Here’s what you can configure:

1. Content Font – Choose a custom font for your breadcrumb text. By default, it inherits the global typography settings, but you can override them here.
2. Background Color – Set a background color for the breadcrumb area to help it stand out from the rest of the page.
3. Text Color – Define a custom color for the breadcrumb text to match your design needs.
4. Separator Color – Customize the color of the separator (such as “>” or “/”) used between breadcrumb items.
5. Content Link Color – Set a specific color for breadcrumb links, making them visually distinct and clickable.
6. Spacing – Adjust the spacing (padding) around the breadcrumb from all sides—top, right, bottom, and left—using pixel values.

These design settings give you greater control over how breadcrumbs appear on your site, helping you match them seamlessly with your overall theme.

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 > General > 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 > General > 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 > General > 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: