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
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
WithAstra 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.