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 customizations with dedicated colors and typography options.

How to Enable Breadcrumb?

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 > Layout > Breadcrumb.

In this article we’ll see –

Breadcrumb Settings in Astra

Below are the available settings for Breadcrumb

  1. Breadcrumb 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. Breadcrumb 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. Breadcrumb Alignment : You can select the alignment to display your breadcrumb
  5. Breadcrumb 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 –
Colors & Background > Breadcrumb
Typographty > Breadcrumb

Display Breadcrumbs Anywhere!

Currently, Astra lets you display breadcrumbs in three places only – inside header, after 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]

Support for third-party plugins

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

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 breadcrumbs from these plugins can be used 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 Yoast SEO plugin.

2. With Breadcrumb NavXT Plugin

  • Install and Activate the Breadcrumb NavXT Plugin
  • You will see an option in the Customizer > Layout > 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 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 > Layout > 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.
Not the solution you are looking for? Check other articles, or open a support ticket.