↑ Back to top

Site Breadcrumbs

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

Styling

Site Breadcrumbs are output as a set of a and 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 current-page class.

Example output:

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