The Site Breadcrumbs feature provides a basic breadcrumb navigation function for your theme to use on single pages on Jetpack-powered sites. Site Breadcrumbs will be displayed in a unique way, consistent with that theme’s design.
Theme developers can add support for Site Breadcrumbs by including the
jetpack_breadcrumbs() function in their theme’s singular page template file (i.e.
page.php), and then styling the markup appropriately to the theme’s design:
Example usage in page.php:
<?php if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?> <div class="breadcrumb-area"> <div class="wrapper"> <?php jetpack_breadcrumbs(); ?> </div> </div> <?php endif; ?>
Note: it’s always smart to use a
function_exists( 'jetpack_breadcrumbs' ) check to make sure that the breadcrumb functionality is present (Jetpack is active and up to date).
Site Breadcrumbs are output as a set of
span tags wrapped in a
nav tag. The nav tag has the
entry-breadcrumbs class, the home link has a
home-link class, and the current page is a span tag with the
<nav class="entry-breadcrumbs"> <a href="https://www.myawesomesite.com/" class="home-link" rel="home">Home</a> <a href="https://www.myawesomesite.com/level-1/">Level 1</a> <a href="https://www.myawesomesite.com/level-1/level-2/">Level 2</a> <span class="current-page">Level 3</span> </nav>