This is a very simple mootools plugin which creates a navigation tree starting from an unordered html list.


It requires mootools core >= 1.3.


The plugin creates a navigable tree starting from an unordered html list (ul tag). It inserts the right controllers in order to collapse/expand trees. Every graphical aspect may be controlled by simple css stylesheet.

Some options available:

  • Expand top: initially expand all the first tree (a classical blog archive behavior)
  • Collapse all: initially collapse or expand all trees
  • Expand level: initially expand the tree at a given level (beginning from level 0 which is always expanded) 
  • Attribute data-expanded: if a li element has the attribute data-expanded set to 1, then the three is expanded in order to show it initially
  • Selected item: the selected item (must have a css class named selected) is always shown initially

mooTreeList has been tested with:

  • windows:
    - google chrome 12
    - firefox 5.0
    - internet explorer 9.0, 8.0, 7.0
  • linux:
    - chromium
    - firefox >= 3.6
  • mac:
    - firefox >= 4 

If you find errors, bugs or simply have some annotations or advises, please comment here or submit them to the project page hosted on github.

mootools forge documentation demo download