node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »



A tree control for twitter bootstrap.

WARNING:This plugin is very much "alpha" and contains a number of hard-coded things that will change over time. Use at your own risk!


  • Twitter Bootstrap
  • jQuery
  • underscore.js
  • require.js (optional)


  • displays data from an object literal as an expandable/collapsable tree
  • fires a custom event whenever a list item is clicked
  • looks like a Twitter Bootstrap control!

More features coming soon.


Assuming you have some data in a regular object literal structure:

var books = {
  'Science Fiction': [
      title: 'Dune',
      author: 'Frank Herbert',
      rating: '5/5'
      title: "Ender's Game",
      author: 'Orson Scott Card',
      rating: '5/5'

and assuming you have some DOM element where you want your tree to appear:

<div id="book-tree"></div>

the tree is initialized in code (probably in a jquery ready() callback) like this:

var tree = tbtree('#book-tree').load(books);

Events may be subscribed to like this:

tree.on('selected', function (e) {
  // where 'e' is a custom object 
  // that will have some data related 
  // to the list item that was selected 

The following events are currently supported:

  • loaded: occurs when the tree has been loaded with data
  • selected: occurs when a node has been clicked on the tree
  • collapsed: occurs when a node has been collapsed
  • expanded: occurs when a node has been expanded

Of course, you can always subscribe to events via jQuery like normal:

$('#book-tree').on('click', 'li', function (e) {
  // a list element was clicked 


vanity shot