NSN: breadcrumb truncation

by Laura Kishimoto

HTML

<nav class="breadcrumbs">
    <div class="breadcrumb">You are here: 
        <a href="/">Home</a> » 
        <a href="#">Level 1 page</a> » 
        <a href="#">Level 2 page</a> » 
        <a href="#">Level 3 page</a> »
        <a href="#">Level 4 page</a> » 
        <a href="#">Level 5 page</a> » 
        <a href="#">Level 6 page</a> » 
        <a href="#">Two column page with a very long title that I can use to test breadcrumb truncation</a> » <!--
        <a href="#">Level 7 page</a> » 
        <a href="#">Level 8 page</a> » -->
        <a href="#" class="active">Current page</a>
    </div>
</nav>

JavaScript

(function($){

    /**
     * Truncate breadcrumbs when over a certain number of levels, and remove link from current page.
     *
     * Options:
     *      intro           {String}    Introductory text, may include markup
     *      separator       {String}    Separating character(s)
     *      maxLevels       {Number}    Integer of maximum levels to show without truncation
     *      startCrumbs     {Number}    Integer of levels to show before the truncated levels
     *      endCrumbs       {Number}    Integer of levels to show after the truncated levels
     *      crumbMaxLength  {Number}    Maximum character length for breadcrumb titles to show without truncation
     */

    $.fn.breadcrumbs = function(options) {

        var el = $(this);

        // truncate individual titles if over set length
        $('a', el).each(function () {
            var crumbTitle = $(this).text();
            if (crumbTitle.length > options.crumbMaxLength) {
                $(this).text(
                    $.trim(crumbTitle).substring(0, 40).split(" ").slice(0, -1).join(" ") + "…"
                );
            }
        });

        // remove the link from the current page crumb
        $('.active', el).replaceWith(
            $('<span/>').text($('.active', el).text())
        );

        var crumbs = $.map($('a, span', el).toArray(), function (x) {
            return x.outerHTML;
        });     

        // if truncation needed
        if (crumbs.length > options.maxLevels) {
            var firstCrumbs = crumbs.slice(0, options.startCrumbs);
            var hideCrumbs = '<a href="#" title="Show all breadcrumbs">…</a>';               
            var lastCrumbs = crumbs.slice(crumbs.length - options.endCrumbs);
            var newCrumbs = firstCrumbs.concat([hideCrumbs]).concat(lastCrumbs);
            el.html(options.intro + newCrumbs.join(options.separator));
        }
        else {
            el.html(options.intro + crumbs.join(options.separator));
        }

 ...