Published on Jul 18, 2018

Breadcrumbs in Oxygen

Sridhar Katakam

This tutorial provides the steps to display breadcrumbs in Oxygen using the Breadcrumb NavXT plugin.

Step 1

Install and activate Breadcrumb NavXT.

Step 2

Edit your main sitewide Oxygen template.

Add a Section in which you want to show the breadcrumbs.

Give the Section a class of say, breadcrumbs-section .

Style it to your liking. In my test site, I set a Background Color of rgba(0,0,0,0.05) and Font size of 14px.

Add a Code Block inside it having the following PHP & HTML:

<?php if ( function_exists( 'bcn_display' ) && ! is_front_page() ) { ?>
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
You are here: <?php bcn_display(); ?>
</div>
<?php } ?>

The above assumes that you do not want the breadcrumbs to appear up on the site’s homepage.

The reason for not using the plugin’s widget is that currently, it does not work properly with Oxygen in that the order of breadcrumbs gets reversed on the frontend. Details.

Step 3

Add this CSS either in the template for your site’s homepage (if you have one) or globally (in the Customizer or Oxygen’s Manage > Stylesheets):

.home .breadcrumbs-section {
display: none;
}

You may want to temporarily remove/comment out this CSS code if/when you want to make changes to the .breadcrumbs-section visually in the Oxygen editor.

That’s it!

Reference: https://mtekk.us/archives/guides/calling-the-breadcrumb-trail/

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right