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]