Breadcrumbs NavXT Twitter Bootstrap v4 filter

breadcrumbs-navxt-twitter-bootstrap-v4-filter.md

Bootstrap 4 requires classes to be placed on the individual <li>'s in order for the breadcrumb styles to work. I guess this is a good thing, but it makes it harder to use Breadcrumb NavXT.

This filter will add the appropriate classes. It also adds the "active" class to the current item.

Add to functions.php

<?php
function bootstrap_bcn_li_attributes( $li_class ) { 

    // add 'breadcrumb-item' class
    $patterns[0] = '/class="/';
    $replacements[0] = '/class="breadcrumb-item ';

    // change 'current_item' to 'active'
    $patterns[1] = '/current_item/';
    $replacements[1] = 'active';

    return preg_replace( $patterns, $replacements, $li_class);
}; 

add_filter( "bcn_li_attributes", "bootstrap_bcn_li_attributes", 10, 3);
?>

Add header.php or wherever you're displaying your breadcrumbs

<ol class="breadcrumb" typeof="BreadcrumbList" vocab="http://schema.org/">
   <?php bcn_display_list(); ?>
</ol>

For me, still seems to output anchors inside spans, not list items.