<p dir="auto">Hi,</p>
<p dir="auto">For a project, I have created a Wizard plugin (the breacrumber is inspired from <a href="http://jsfiddle.net/weswinham/ySfN6/" rel="nofollow">http://jsfiddle.net/weswinham/ySfN6/</a>).</p>
<p dir="auto">If you want, you can integrate it.</p>
<p dir="auto">Cheers</p>
<hr>
<p dir="auto">CSS:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
@CHARSET &quot;UTF-8&quot;;

.wizard {
    background-color: white;
}

.wizard-header a {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}

.wizard-header a:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: &quot;&quot;;
    top: 0;
    left: 0;
}

.wizard-header a:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: &quot;&quot;;
    top: 0;
    right: -20px;
    z-index: 2;
}

.wizard-header a:first-child:before,
.wizard-header a:last-child:after {
    border: none;
}

.wizard-header a:first-child {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
     border-radius: 4px 0 0 4px;
}

.wizard-header a:last-child {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.wizard-header .badge {
    margin: 0 5px 0 18px;
    position: relative;
    top: -1px;
}

.wizard-header a:first-child .badge {
    margin-left: 0;
}

.wizard-header .active {
    background: #007ACC;
    color: #fff;
}

.wizard-header .active:after {
    border-left-color: #007ACC;
}"><pre class="notranslate"><code class="notranslate">
@CHARSET "UTF-8";

.wizard {
    background-color: white;
}

.wizard-header a {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}

.wizard-header a:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}

.wizard-header a:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}

.wizard-header a:first-child:before,
.wizard-header a:last-child:after {
    border: none;
}

.wizard-header a:first-child {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
     border-radius: 4px 0 0 4px;
}

.wizard-header a:last-child {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.wizard-header .badge {
    margin: 0 5px 0 18px;
    position: relative;
    top: -1px;
}

.wizard-header a:first-child .badge {
    margin-left: 0;
}

.wizard-header .active {
    background: #007ACC;
    color: #fff;
}

.wizard-header .active:after {
    border-left-color: #007ACC;
}
</code></pre></div>
<hr>
<p dir="auto">JS:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
/**
 * Wizard plugin for Boostrap
 * Require the carousel plugin
 * 
 * An example of HTML to use it:
 * 
&lt;div id=&quot;wizard&quot; data-role=&quot;wizard&quot;&gt;
    &lt;div class=&quot;active&quot; data-title=&quot;step 1&quot;&gt;
        Your content
    &lt;/div&gt;
    
    &lt;div data-title=&quot;step 2&quot;&gt;
        Your content
    &lt;/div&gt;
&lt;/div&gt;

 * 
 * Another one:
 * 
 &lt;div id=&quot;wizard&quot; data-role=&quot;wizard&quot;&gt;
    &lt;div class=&quot;active&quot; data-title=&quot;step 1&quot;&gt;
        Your content
    &lt;/div&gt;
    
    &lt;div data-title=&quot;step 2&quot;&gt;
        Your content
    &lt;/div&gt;
&lt;/div&gt;

 *
 * And an example of JavaScript:

$(&quot;#wizard&quot;).wizard({
    validNextStep: function(index) { 
        return true; 
    },
    changeStep: function(index) {
        alert(&quot;Step &quot; + (index + 1))
    },
    finish: function(event) {
        event.preventDefault();
        alert(&quot;Finished !&quot;)
    }
});

 */

!function($) {
    &quot;use strict&quot;;

    /* WIZARD PUBLIC CLASS DEFINITION
     * ============================== */

    var Wizard = function(element, options) {
        var self = this;
        
        // Base
        this.$element = $(element);
        this.options = $.extend({}, $.fn.wizard.defaults, options);
        this.idx = 0;
        this.maxIdx = 0;
        
        // Get some informations
        this.$items = $(&quot;&gt; div[data-title]&quot;, this.$element);
        this.maxIdx = this.$items.length - 1;
        
        // Initialization
        this.$element.find(&quot;&gt; *&quot;).wrapAll(&quot;&lt;div class='carousel slide' data-interval='false'&gt;&lt;/div&gt;&quot;);
        this.$element.addClass(&quot;wizard thumbnail&quot;);
        this.$base = this.$element.find(&quot;&gt; div.carousel&quot;);
        this.$base.carousel({ interval: false });
        
        if(this.$element.attr(&quot;id&quot;)){
            this.$base.attr(&quot;id&quot;, &quot;wizard-&quot; + this.$element.attr(&quot;id&quot;));
            
        } else {
            this.$base.attr(&quot;id&quot;, &quot;wizard-&quot; + new Date().getTime() + &quot;-&quot; + window.parseInt((Math.random() * 1000)));
        }
        
        // Wizard header
        this.$wizardHeader = $(&quot;&lt;div class='wizard-header'&gt;&lt;/div&gt;&quot;);
        this.$items.each(function(index, item){
            var $item = $(item), active = index == 0;
            
            $item.addClass(&quot;item&quot;);
            active &amp;&amp; $item.addClass(&quot;active&quot;);
            
            self.$wizardHeader.append(&quot;&lt;a href='#'&quot; + (active ? &quot; class='active'&quot; : &quot;&quot;) + &quot; data-index='&quot; + index + &quot;'&gt;&lt;span class='badge&quot; + (active ? &quot;&quot; : &quot; badge-inverse&quot;) + &quot;'&gt;&quot; + (index + 1) + &quot;&lt;/span&gt; &quot; + $item.data(&quot;title&quot;) + &quot;&lt;/a&gt;&quot;);
        });
        
        this.$base.before(this.$wizardHeader);
        this.$base.before(&quot;&lt;br /&gt;&quot;);
            
        // Wizard core
        this.$items.wrapAll(&quot;&lt;div class='carousel-inner'&gt;&lt;/div&gt;&quot;);
        this.$base.append(&quot;&lt;br /&gt;&quot;);
        
        this.$previous = $(&quot;&lt;a class='btn btn-inverse' data-slide='prev'&gt;&lt;i class='icon-chevron-left icon-white'&gt;&lt;/i&gt; &quot; + this.options.previousText + &quot;&lt;/a&gt;&quot;);
        this.$previous.attr(&quot;href&quot;, &quot;#&quot; + this.$base.attr(&quot;id&quot;));
        this.$previous.css(&quot;visibility&quot;, &quot;hidden&quot;);
        this.$base.append(this.$previous);
        
        this.$next = $(&quot;&lt;a class='btn btn-inverse' data-slide='next'&gt;&lt;i class='icon-chevron-right icon-white'&gt;&lt;/i&gt; &quot; + this.options.nextText + &quot;&lt;/a&gt;&quot;);
        this.$next.attr(&quot;href&quot;, &quot;#&quot; + this.$base.attr(&quot;id&quot;));
        this.$base.append(this.$next);
        
        this.$finish = $(&quot;&lt;button type='submit' class='btn btn-primary'&gt;&quot; + this.options.finishText + &quot;&lt;/button&gt;&quot;);
        this.$finish.css(&quot;visibility&quot;, &quot;hidden&quot;);
        this.$finish.on(&quot;click&quot;, this.options.finish);
        this.$base.append(this.$finish);
        
        // Listeners
        this.$wizardHeader.on(&quot;click&quot;, &quot;&gt; a&quot;, function(event){
            event.preventDefault();
            self.index($(this).data(&quot;index&quot;));
        });
        
        this.$base.on(&quot;click&quot;, &quot;&gt; a&quot;, function(event){
            event.preventDefault();
            $(this).data(&quot;slide&quot;) == &quot;next&quot; ? self.next() : self.prev();
        });
    };
    
    Wizard.prototype.index = function(index){
        if(index != null &amp;&amp; index &gt;= 0 &amp;&amp; index &lt;= this.maxIdx){
            this.$base.carousel(index);
            this.idx = index;
            this.update();
            $.isFunction(this.options.changeStep) &amp;&amp; this.options.changeStep(this.idx);
        }
        
        return this.idx;
    };
    
    Wizard.prototype.update = function() {
        if(this.idx == 0){
            this.$previous.css(&quot;visibility&quot;, &quot;hidden&quot;);
            this.$next.css(&quot;visibility&quot;, &quot;visible&quot;);
            this.$finish.css(&quot;visibility&quot;, &quot;hidden&quot;);
            
        } else if(this.idx == this.maxIdx){
            this.$previous.css(&quot;visibility&quot;, &quot;visible&quot;);
            this.$next.css(&quot;visibility&quot;, &quot;hidden&quot;);
            this.$finish.css(&quot;visibility&quot;, &quot;visible&quot;);
            
        } else {
            this.$previous.css(&quot;visibility&quot;, &quot;visible&quot;);
            this.$next.css(&quot;visibility&quot;, &quot;visible&quot;);
            this.$finish.css(&quot;visibility&quot;, &quot;hidden&quot;);
        }
        
        $(&quot;.active&quot;, this.$wizardHeader).removeClass(&quot;active&quot;);
        $(&quot;a:eq(&quot; + this.idx + &quot;)&quot;, this.$wizardHeader).addClass(&quot;active&quot;);
    };

    Wizard.prototype.prev = function() {
        if(this.idx &gt; 0){
            this.$base.carousel(&quot;prev&quot;);
            this.idx--;
            this.update();
            $.isFunction(this.options.changeStep) &amp;&amp; this.options.changeStep(this.idx);
        }
        
    };
    
    Wizard.prototype.next = function() {
        if(this.idx &lt;= this.maxIdx &amp;&amp; this.options.validNextStep(this.idx)){
            this.$base.carousel(&quot;next&quot;);
            this.idx++;
            this.update();
            $.isFunction(this.options.changeStep) &amp;&amp; this.options.changeStep(this.idx);
        }
    };
    
    Wizard.prototype.option = function(options){
        for(var i in options) {
            switch(i){
                case &quot;nextText&quot;:
                    this.$next.text(options[i]);
                    
                case &quot;previousText&quot;:
                    this.$previous.text(options[i]);
                    
                case &quot;finishText&quot;:
                    this.$finish.text(options[i]);
                    
                case &quot;finish&quot;:
                    this.$finish.off(&quot;click&quot;, this.options.finish);
                    this.$finish.on(&quot;click&quot;, options[i]);
            
                default:
                    this.options[i] = options[i];
                    break;
            }
        }
    };

    /* WIZARD PLUGIN DEFINITION
     * ======================== */

    $.fn.wizard = function(opts) {
        return this.each(function() {
            var $this = $(this), data = $this.data(&quot;wizard&quot;), options = typeof opts == &quot;object&quot; &amp;&amp; opts;
            
            if(data){
                data.option(options)
                
            } else {
                $this.data(&quot;wizard&quot;, new $.fn.wizard.Constructor(this, options));
            }
            
        });
    };

    $.fn.wizard.defaults = {
        nextText: &quot;Next&quot;,
        previousText: &quot;Previous&quot;,
        finishText: &quot;Finish&quot;,
        validNextStep: function(index) { return true; },
        changeStep: function(index) {},
        finish: function(event) {}
    };

    $.fn.wizard.Constructor = Wizard;

    /* WIZARD DATA-API
     * =============== */

    $(function() {
        $(&quot;body&quot;).find(&quot;div[data-role=wizard], div.wizard&quot;).wizard();
    });

}(window.jQuery);"><pre class="notranslate"><code class="notranslate">
/**
 * Wizard plugin for Boostrap
 * Require the carousel plugin
 * 
 * An example of HTML to use it:
 * 
&lt;div id="wizard" data-role="wizard"&gt;
    &lt;div class="active" data-title="step 1"&gt;
        Your content
    &lt;/div&gt;
    
    &lt;div data-title="step 2"&gt;
        Your content
    &lt;/div&gt;
&lt;/div&gt;

 * 
 * Another one:
 * 
 &lt;div id="wizard" data-role="wizard"&gt;
    &lt;div class="active" data-title="step 1"&gt;
        Your content
    &lt;/div&gt;
    
    &lt;div data-title="step 2"&gt;
        Your content
    &lt;/div&gt;
&lt;/div&gt;

 *
 * And an example of JavaScript:

$("#wizard").wizard({
    validNextStep: function(index) { 
        return true; 
    },
    changeStep: function(index) {
        alert("Step " + (index + 1))
    },
    finish: function(event) {
        event.preventDefault();
        alert("Finished !")
    }
});

 */

!function($) {
    "use strict";

    /* WIZARD PUBLIC CLASS DEFINITION
     * ============================== */

    var Wizard = function(element, options) {
        var self = this;
        
        // Base
        this.$element = $(element);
        this.options = $.extend({}, $.fn.wizard.defaults, options);
        this.idx = 0;
        this.maxIdx = 0;
        
        // Get some informations
        this.$items = $("&gt; div[data-title]", this.$element);
        this.maxIdx = this.$items.length - 1;
        
        // Initialization
        this.$element.find("&gt; *").wrapAll("&lt;div class='carousel slide' data-interval='false'&gt;&lt;/div&gt;");
        this.$element.addClass("wizard thumbnail");
        this.$base = this.$element.find("&gt; div.carousel");
        this.$base.carousel({ interval: false });
        
        if(this.$element.attr("id")){
            this.$base.attr("id", "wizard-" + this.$element.attr("id"));
            
        } else {
            this.$base.attr("id", "wizard-" + new Date().getTime() + "-" + window.parseInt((Math.random() * 1000)));
        }
        
        // Wizard header
        this.$wizardHeader = $("&lt;div class='wizard-header'&gt;&lt;/div&gt;");
        this.$items.each(function(index, item){
            var $item = $(item), active = index == 0;
            
            $item.addClass("item");
            active &amp;&amp; $item.addClass("active");
            
            self.$wizardHeader.append("&lt;a href='#'" + (active ? " class='active'" : "") + " data-index='" + index + "'&gt;&lt;span class='badge" + (active ? "" : " badge-inverse") + "'&gt;" + (index + 1) + "&lt;/span&gt; " + $item.data("title") + "&lt;/a&gt;");
        });
        
        this.$base.before(this.$wizardHeader);
        this.$base.before("&lt;br /&gt;");
            
        // Wizard core
        this.$items.wrapAll("&lt;div class='carousel-inner'&gt;&lt;/div&gt;");
        this.$base.append("&lt;br /&gt;");
        
        this.$previous = $("&lt;a class='btn btn-inverse' data-slide='prev'&gt;&lt;i class='icon-chevron-left icon-white'&gt;&lt;/i&gt; " + this.options.previousText + "&lt;/a&gt;");
        this.$previous.attr("href", "#" + this.$base.attr("id"));
        this.$previous.css("visibility", "hidden");
        this.$base.append(this.$previous);
        
        this.$next = $("&lt;a class='btn btn-inverse' data-slide='next'&gt;&lt;i class='icon-chevron-right icon-white'&gt;&lt;/i&gt; " + this.options.nextText + "&lt;/a&gt;");
        this.$next.attr("href", "#" + this.$base.attr("id"));
        this.$base.append(this.$next);
        
        this.$finish = $("&lt;button type='submit' class='btn btn-primary'&gt;" + this.options.finishText + "&lt;/button&gt;");
        this.$finish.css("visibility", "hidden");
        this.$finish.on("click", this.options.finish);
        this.$base.append(this.$finish);
        
        // Listeners
        this.$wizardHeader.on("click", "&gt; a", function(event){
            event.preventDefault();
            self.index($(this).data("index"));
        });
        
        this.$base.on("click", "&gt; a", function(event){
            event.preventDefault();
            $(this).data("slide") == "next" ? self.next() : self.prev();
        });
    };
    
    Wizard.prototype.index = function(index){
        if(index != null &amp;&amp; index &gt;= 0 &amp;&amp; index &lt;= this.maxIdx){
            this.$base.carousel(index);
            this.idx = index;
            this.update();
            $.isFunction(this.options.changeStep) &amp;&amp; this.options.changeStep(this.idx);
        }
        
        return this.idx;
    };
    
    Wizard.prototype.update = function() {
        if(this.idx == 0){
            this.$previous.css("visibility", "hidden");
            this.$next.css("visibility", "visible");
            this.$finish.css("visibility", "hidden");
            
        } else if(this.idx == this.maxIdx){
            this.$previous.css("visibility", "visible");
            this.$next.css("visibility", "hidden");
            this.$finish.css("visibility", "visible");
            
        } else {
            this.$previous.css("visibility", "visible");
            this.$next.css("visibility", "visible");
            this.$finish.css("visibility", "hidden");
        }
        
        $(".active", this.$wizardHeader).removeClass("active");
        $("a:eq(" + this.idx + ")", this.$wizardHeader).addClass("active");
    };

    Wizard.prototype.prev = function() {
        if(this.idx &gt; 0){
            this.$base.carousel("prev");
            this.idx--;
            this.update();
            $.isFunction(this.options.changeStep) &amp;&amp; this.options.changeStep(this.idx);
        }
        
    };
    
    Wizard.prototype.next = function() {
        if(this.idx &lt;= this.maxIdx &amp;&amp; this.options.validNextStep(this.idx)){
            this.$base.carousel("next");
            this.idx++;
            this.update();
            $.isFunction(this.options.changeStep) &amp;&amp; this.options.changeStep(this.idx);
        }
    };
    
    Wizard.prototype.option = function(options){
        for(var i in options) {
            switch(i){
                case "nextText":
                    this.$next.text(options[i]);
                    
                case "previousText":
                    this.$previous.text(options[i]);
                    
                case "finishText":
                    this.$finish.text(options[i]);
                    
                case "finish":
                    this.$finish.off("click", this.options.finish);
                    this.$finish.on("click", options[i]);
            
                default:
                    this.options[i] = options[i];
                    break;
            }
        }
    };

    /* WIZARD PLUGIN DEFINITION
     * ======================== */

    $.fn.wizard = function(opts) {
        return this.each(function() {
            var $this = $(this), data = $this.data("wizard"), options = typeof opts == "object" &amp;&amp; opts;
            
            if(data){
                data.option(options)
                
            } else {
                $this.data("wizard", new $.fn.wizard.Constructor(this, options));
            }
            
        });
    };

    $.fn.wizard.defaults = {
        nextText: "Next",
        previousText: "Previous",
        finishText: "Finish",
        validNextStep: function(index) { return true; },
        changeStep: function(index) {},
        finish: function(event) {}
    };

    $.fn.wizard.Constructor = Wizard;

    /* WIZARD DATA-API
     * =============== */

    $(function() {
        $("body").find("div[data-role=wizard], div.wizard").wizard();
    });

}(window.jQuery);
</code></pre></div>
<p dir="auto">It would be great if you could add a progress tracker navigation device to your supported styles / examples.</p>
<p dir="auto">These are now pretty common place navigation items and I would think that other people would want this too.</p>
<p dir="auto">I've subverted a 'pager' for this purpose with some custom styles. But it still doesn't feel right.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/fed69020a338f7b7b1d9c74418f4c2116afc4b88c8f2915173324b1a0297648e/687474703a2f2f696d67686f7374722e6d652f696d616765732f4e6879624b2e706e67"><img src="https://camo.githubusercontent.com/fed69020a338f7b7b1d9c74418f4c2116afc4b88c8f2915173324b1a0297648e/687474703a2f2f696d67686f7374722e6d652f696d616765732f4e6879624b2e706e67" alt="Progress Tracker" data-canonical-src="http://imghostr.me/images/NhybK.png" style="max-width: 100%;"></a></p>
<p dir="auto">NB Some more examples</p>
<p dir="auto"><a href="http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/" rel="nofollow">http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/</a></p>