Breadcrumb NavXT and Bootstrap 4 Breadcrumb

Out of the box Breadcrumb NavXT generates markup that is ready for Schema.org BreadcrumbList compliance. While this is great for most cases, for users of frameworks, some markup changes may be desireable. This article looks at what is necessary to get Breadcrumb NavXT to generate markup compliant with Bootstrap 4’s Breadcrumb component.

The Code

To generate Bootstrap 4 breadcrumb compliant markup, two bits of code are needed. The first is the appropriate calling code (including the proper wrapping markup). Place the following calling code in the appropriate theme file(s) (usually header.php):

<?php if(function_exists('bcn_display_list')):?>
<nav class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <?php bcn_display_list();?>
    </ol>
</nav>
<?php endif; ?>

The second bit of code goes into a site specific plugin:

add_filter('bcn_display_attributes', my_display_attributes_filter, 10, 3);
function my_display_attributes_filter($attribs, $types, $id)
{
    $extra_attribs = array('class' => array('breadcrumb-item'));
    //For the current item we need to add a little more info
    if(is_array($types) && in_array('current-item', $types))
    {
        $extra_attribs['class'][] = 'active';
        $extra_attribs['aria-current'] = array('page');
    }
    $atribs_array = array();
    preg_match_all('/([a-zA-Z]+)=["\']([a-zA-Z0-9\-\_ ]*)["\']/i', $attribs, $matches);
    if(isset($matches[1]))
    {
        foreach ($matches[1] as $key => $tag)
        {
            if(isset($matches[2][$key]))
            {
                $atribs_array[$tag] = explode(' ', $matches[2][$key]);
            }
        }
    }
    $merged_attribs = array_merge_recursive($atribs_array , $extra_attribs);
    $output = '';
    foreach($merged_attribs as $tag => $vals)
    {
        $output .= sprintf(' %1$s="%2$s"', $tag, implode(' ', $vals));
    }
    return $output;
}

This code adds the breadcrumb-item to every breadcrumb in the trail. Additionally it adds the active class and the arria-current attribute to the current item. While the first could be easily achieved by updating every Breadcrumb template, this solution is easier to implement and allows us to use bcn_display_list().

Unfortunately, the bcn_display_attributes filter available since Breadcrumb NavXT 6.0 is not the easiest use in an efficient and robust manner. In the future a new filter will be added to address this deficiency. As presented, my_display_attributes_filter will be greatly simplified with said new filter (lines 11-22 and 24-28 go away). This article will be updated at that time to reflect the changes in API.

-John Havlik

[end of transmission, stay tuned]

Posted in Guides
Updated:

2 thoughts on “Breadcrumb NavXT and Bootstrap 4 Breadcrumb

  1. The Breadcrumb NavXT is an excellent tool, and I love how elegant it is. However, many templates (including the one I’m using) dispense with the traditional navigation button array once the page is squished into a mobile format. As a result, a new mobile drop-down nav appears at the top — and that’s just fine. Still, the NavXT persists in the usual location when this happens. Unfortunately, long titles nested deep in sections of the site results in a train-wreck of breadcrumb navigation when viewed in mobile format.

    My question is this: Can I disable the display of the NavXT if the screen width drops below a specific value? It would really help things stay clean.

    Thank you.

    • Normally, you would use CSS media queries to disable the display of the breadcrumb elements on small screens if you want to hide the trail on small screens. For the example presented in this article, you could use something like .breadcrumbs{display: none;} placed in the appropriate media query block in your theme’s (or child theme’s) style.css.

      -John Havlik

Leave a Reply

Your email address will not be published. Required fields are marked *