express-url-breadcrumb

    1.0.2 • Public • Published

    express-url-breadcrumb

    Shippable branch npm

    Generates a breadcrumb array from the current URL and exposes to views via a breadcrumb variable.

    Very useful when you need to generate SEO friendly breadcrumbs as shown below:

    Installation

    npm install --save express-url-breadcrumb

    Usage

    Add the module to your server application and attach to express.

    var breadcrumb = require('express-url-breadcrumb');
    
    // use for every request  
    app.use(breadcrumb());
    
    // alternatively, add to a specific route
    app.get('/snickers-workwear/snickers-trousers/snickers-3211-craftsmen-trousers', breadcrumb(), function(req, res){
        res.render('product-detail');
    });

    Optionally pass a modifier function to the constructor:

    // use for every request  
    app.use(breadcrumb(function(item, index) {
        // convert each breadcrumb label to upper case
        item.label = item.label.toUpperCase();
    }));

    View Template

    The example below demonstrates how to render a SEO friendly breadcrumb using a handlebars.js template. Notice the breadcrumb variable has not been passed in, it's already available to all views.

    <ol class="breadcrumb">
        {{#each breadcrumb}}
            {{#unless @last}}
                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                    <a href="{{this.url}}" itemprop="url">
                        <span itemprop="title">{{this.label}}</span>
                    </a>
                </li>
            {{else}}
                <li>
                    <span>{{this.label}}</span>
                </li>
            {{/unless}}
        {{/each}}
    </ol>

    HTML Output

    <ol class="breadcrumb">
        <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://mammothworkwear.com" itemprop="url">
                <span itemprop="title">Home</span>
            </a>
        </li>
        <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://mammothworkwear.com/snickers-workwear" itemprop="url">
                <span itemprop="title">Snickers Workwear</span>
            </a>
        </li>
        <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://mammothworkwear.com/snickers-workwear/snickers-trousers" itemprop="url">
                <span itemprop="title">Snickers Trousers</span>
            </a>
        </li>
        <li>
            <span>Snickers 3211 Craftsmen Trousers</span>
        </li>
    </ol>

    The breadcrumb variable is an Array of objects. To give you an idea of its structure, here is a version created manually:

      var breadcrumb = [];
      
      breadcrumb.push({ label: 'Home', url: 'http://mammothworkwear.com' });
      breadcrumb.push({ label: 'Snickers Workwear', url: 'http://mammothworkwear.com/snickers-workwear' });
      breadcrumb.push({ label: 'Snickers Trousers', url: 'http://mammothworkwear.com/snickers-workwear/snickers-trousers' });
      breadcrumb.push({ label: 'Snickers 3211 Craftsmen Trousers', url: 'http://mammothworkwear.com/snickers-workwear/snickers-trousers/snickers-3211-craftsmen-trousers' });

    Each item in the breadcrumb array has a .url and a .label property.

    Tests

    You can run unit tests using:

    npm test

    You can also request code coverage information using:

    npm test --coverage

    License

    ISC License © 2016 John Doherty

    Install

    npm i express-url-breadcrumb

    DownloadsWeekly Downloads

    48

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    9.71 kB

    Total Files

    7

    Last publish

    Collaborators

    • john-doherty