In this example, an instance of Uize.Widgets.NavTree.List.Widget is instantiated to produce a multi-level contents tree. The markup for the list is generated when the widget is wired up. The structure for the markup is driven by a JSON data structure that is supplied to the items state property of the widget. This data structure is purely for demonstration purposes, so none of the items have active links specified (i.e. clicking does nothing).

If you hold down the shift key when clicking to expand a level, you can expand the contents of that level to only one level deep. This is convenient when trying to expand a tree bit by bit. Holding down the ctrl key when expanding a level will expand the contents of that level fully. Whenever you collapse a level and expand it again later, its contents are restored to the way they were before you collapsed the level.

Below are some links that execute snippets of code to demonstrate the programmatic interface of the widget.