Add Breadcrumbs with Astra! Easy and Fast!
Sujay Pawar

March 28, 2019

Add Breadcrumbs with Astra! Easy and Fast!

Breadcrumbs in Astra

Astra lets you add breadcrumbs! And not just that – you can add stylish breadcrumbs by managing the colors and typography to suit your website’s theme.

Now, what are Breadcrumbs?

The logic behind Breadcrumbs came from a famous story about Hansel and Gretel who went into the woods and dropped pieces of bread on their way, so that it becomes easier to find their way back home.

Now, coming back to our websites… Breadcrumbs are a way to let users know where they are on a website and make backward navigation easier for them. Breadcrumbs on a website also lets search engines understand a website’s hierarchy.

While improving user experience on a website and giving a clear picture to search engines, Breadcrumbs are important in the user point of view as well as in the SEO point of view. Search engines – especially Google loves them! Here is an article about Breadcrumbs on SearchEngine Journal.

Breadcrumbs in Astra

Until now, themes often depended on third party plugins or some PHP code to add breadcrumbs on a website. But, with Astra version 1.8.0 we are introducing the easiest way to add breadcrumbs with just a few clicks!

Here are a few examples of breadcrumbs built in Astra –

Display a breadcrumb in a position you like!

Astra lets you set different positions to display Breadcrumbs on a webpage. The image below has it place above the title.

Use colors on a breadcrumb to make it look great!

Astra lets you manage the colors you see within a breadcrumb. You get various color options for the text, links, separator, background, etc.

Manage the typography of the breadcrumb text!

Wish to make a breadcrumb stand out from the rest of the content on your page? You can manage it’s typography through the customizer itself!

Wondering how we did that?

You no longer need an external plugin or loads of code to add this.

  • With Astra you simply move on to the Customizer -> Layout -> Breadcrumbs.
  • Select the place you wish to add it in. (Inside the header, below the header or above the title)
  • Select the Separator you wish to use. Manage the display options, the alignment and spacing in the settings below.

And… You’re done!

When built with Astra, breadcrumbs take the default theme settings for color and typography. However, you can edit them through the customizer itself.

Doesn’t that sound easy? Well, it is!

Breadcrumbs with Astra can be added with a breeze and you’ll love the way it looks on your website.

It also uses the latest JSON LD technology and therefore follows Google’s guidelines. This increases its chances of appearing in rich snippets within the search engine result pages and also affects your ranking on them.

Here is how your website might look on the search engine results page

Doesn’t the breadcrumb give you a clear picture of the website hierarchy? And it surely gives you an idea about the categories you’ll be taken into.

You could be standing out with breadcrumbs like these by simply using Astra! 🙂

Now that we know what Breadcrumbs are, how important are they and how easy it is to implement them using Astra, let us go through some –

Frequently Asked Questions

Can I use third party plugins like Yoast SEO to implement breadcrumbs? Does Astra support them?

Yes! Astra supports plugins like Yoast SEO, Breadcrumb NavXT and Rank Math. You can add breadcrumbs through these plugins and manage the styling through Astra.

Can we hide breadcrumbs on particular pages and posts?

Yes! You can disable breadcrumbs on archive pages, 404 pages, etc. through the customizer itself. However, you can also disable them on individual pages and posts through the post meta settings.

Does this change the breadcrumbs added through the Page header module of the Astra Pro addon?

No! The breadcrumbs added through the page header module will remain the same. However, you can add a filter to update this according to the recent breadcrumb trail. You can read our knowledge base article that will help you switch the breadcrumb trail using a filter.

Can I add the breadcrumb anywhere on a page?

Yes! We have a shortcode that can be pasted within any custom layout, page builder widget, sidebar widgets, header, footer, etc. This shortcode will display the breadcrumb in your desired location.

Excited to begin using Breadcrumbs?

Update the Astra theme and the Astra Pro addon now and start building one for your website!

Have any queries or suggestions you want us to work on? Please feel free to drop them in the comments below or you can simply write to us.

Join 208,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

About the Author

Sujay is CEO and Co-Founder of Brainstorm Force, the company behind Astra. He is a diehard entrepreneur, growth hacker, and YouTube addict. Get in touch with him on Twitter @sujaypawar.

Sharing is Caring!
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

24 comments

  1. Nice addition! Surprised and very glad to see Rank Math support in there! Would love to see SEOPress support added too. Inserting their Breadcrumbs isn’t as simple, so maybe it’s not feasible.

    Thanks though, great update!

    1. You’re welcome Rick! 🙂

      Thank you for sharing your thoughts! It encourages us to put in a lot more efforts in introducing new things.

      Will certainly share your suggestion with our developers to see whether a support for SEOPress is possible anytime soon. Thank you again!

  2. I have been trying to translate your “Home” part of the breadcrumb and it never works. I had tested it tens of times clearing and disabling all the cache, using Loco Translate plugin with a Custom directory and all possible tricks there are. Nothing works. Could you please have a look at it? Thank you!

    1. This should be working since v1.8.1 of the Astra theme. Can you update your theme and check if this is working for you?

  3. Hello,
    it seems that the option “After Header” does not work on sites with transparent header. The breadcrumbs are hidden somewhere on the top of the page.
    Inside header or Before title are fine

    1. That is expected when the transparent header is used right now. The `after header` action puts breadcrumb markup after the after the `

      ` tag.
  4. Hey Astra Team,

    You’re one of the best in the market. Astra theme and add-on are amazing and my blog looks great now.

    And, it supports every important plugin and has all the important features that every blogger needs.

    1. Hello Mudassir,

      Thank you for your kind words! They certainly encourage us to put in a lot more efforts in all we do. 🙂

  5. Hello,

    Using Breadcrumb NavXT generates errors in the Google structured data testing tool.

    Please provide the value of the required field “itemListElement”.

    1. The markup generated when using NavXT plugin is fixed in the development version of the theme. This will be released in the upcoming update.

  6. Earlier i thought breadcrumb is not available in your blog and it was the major reason i did not go for your theme, but now i can simply use it for my blog.

    thanks for the information.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Articles

Scroll to Top
Like what you read? Leave a comment

Send this to a friend