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="">
    You are here: <?php bcn_display(); ?>
<?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!


Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: