The Breadcrumb component provides a lightweight global UI component that includes the following features:

• A JavaScript functions that appends or removes a breadcrumb item.

• An ability to display removable filtering criteria.

The Breadcrumb component consists of the following:

• Breadcrumb.component : The Visualforce component to be embedded on your Visualforce page

Breadcrumb component attribute

The Breadcrumb component accepts the following attribute.

Breadcrumb support functions

Subscribe to the "Item Deleted" event

The Breadcrumb component follows the Publish-Subscribe pattern so that you can write your own "Subscriber" to the Topic.BREADCRUMB_ITEM_DELETED when the user deletes an item in the Breadcrumb component.

pubsubz.subscribe(Topic.BREADCRUMB_ITEM_DELETED, function (topics, data) {
  // Implement what to do on the delete event
});

Sample code

The following Visualforce page code contains a Breadcrumb component instance and buttons to interact with the component.

<apex:page showHeader="true" sidebar="true" title="Testing Breadcrumb">
  <zqu:Breadcrumb name="myTest" />
  <zqu:Breadcrumb name="mySecondTest" />
  <form>
    <p>
      <input type="button" id="btn-add-1" value="Add to first breadcrumb" />
      <input type="button" id="btn-add-2" value="Add to second breadcrumb" />
    </p>
    <p>
      <input type="button" id="btn-save" value="Save to LocalStorage" />
      <input type="button" id="btn-restore" value="Restore from LocalStorage" />
    </p>
  </form>
  <div id="deleted"></div>
  <script type="text/javascript">
  (function (window, document) {
    var btnFirstAdd = document.getElementById('btn-add-1');
    var btnSecondAdd = document.getElementById('btn-add-2');
    var areaDeleted = document.getElementById('deleted');
    var btnSave = document.getElementById('btn-save');
    var btnRestore = document.getElementById('btn-restore');
    // Used to generate a random string
    function makeId(length) {
      var text = '';
      var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      for (var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      return text;
    }
    // Called when one of the buttons are clicked
    function addToBreadcrumb(breadcrumbName) {
      var timeAdded = new Date();
      var text = 'Added at ' + timeAdded.getSeconds() + '"' + timeAdded.getMilliseconds();
      (if (breadcrumbName == "myTest")
        window.breadcrumbs.myTest.append(makeId(15), text, breadcrumbName);
      else
        window.breadcrumbs.mySecondTest.append(makeId(15), text);
    }
    // Print the received data
    function toString(data) {
      var tmp = [];
      for (var prop in data) {
        if (data.hasOwnProperty(prop))
          tmp.push(prop + ': ' + data[prop]);
      }
      return '{ ' + tmp.join('; ') + ' }';
    }
    // Add the event listener to the button
    btnFirstAdd.addEventListener('click', function () {
      addToBreadcrumb('myTest');
    }, false);
    btnSecondAdd.addEventListener('click', function () {
      addToBreadcrumb('mySecondTest')
    }, false);
    // Subscribe to the deletion event
    pubsubz.subscribe(Topic.BREADCRUMB_ITEM_DELETED, function (topics, data) {
      areaDeleted.innerHTML += 'Deleted: ' + toString(data) + '<br/>';
    });
    btnSave.addEventListener('click', function (e) {
      e.preventDefault();
      window.breadcrumbs.myTest.save();
    });
    btnRestore.addEventListener('click', function (e) {
      e.preventDefault();
      window.breadcrumbs.myTest.restore();
    });
    }(this, this.document));
  </script>
</apex:page>