In this example, the tree is loaded from standard html ul/li structure as shown in the box on the left.

          <div id="myHTMLTree">
            <input type="hidden" value="enbscroll=true;height=250px;oneclick=true;">
            <ul>
              <li><a  href="javascript:void(0)" exp="true">Desktop</a>
                <ul>
                  <li>
                    <a href="javascript:void(0);" ic="../nlstree/img/mydoc.gif,../nlstree/img/mydocopen.gif">My Documents</a>
                    <ul>
                      <li><a href="#" ic="../nlstree/img/mp3.gif">Mp3s</a></li>
                      <li><a href="#" ic="../nlstree/img/movie.gif">Movies</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="javascript:void(0)">Programming</a>
                    <ul>
                      <li>
                        <a  href="javascript:void(0)">Visual Studio .Net</a>
                        <ul>
                          <li><a href="#">VB .NET</a></li>
                          <li><a href="#">C#</a></li>
                          <li><a href="#">J#</a></li>
                        </ul>
                      </li>
                      <li>
                        <a href="javascript:void(0)">Java Stuff</a>
                        <ul>
                          <li><a href="#">Apache Tomcat</a></li>
                          <li><a href="#">Apache Ant</a></li>
                          <li><a href="#">JBoss J2EE App Server</a></li>
                          <li><a href="#">Apache Web Server</a></li>
                          <li><a href="javascript:void(0)">Sun J2SDK</a>
                            <ul>
                              <li><a href="#">J2SDK 1.4.1</a></li>
                              <li><a href="#">J2SDK 1.5.0</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="javascript:void(0)" title="">Program Files</a>
                    <ul>
                      <li>
                        <a href="javascript:void(0)">Microsoft Office</a>
                        <ul>
                          <li><a href="#">Microsoft Office</a></li>
                          <li><a href="#">Microsoft Excel</a></li>
                          <li><a href="#">Microsoft Word</a></li>
                          <li><a href="#">Microsoft Access</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Text Editor</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="javascript:void(0)" title="">Private!</a>
                    <ul>
                      <li><a href="#">Bank Accounts</a></li>
                      <li><a href="#">Confidential Documents</a></li>
                    </ul>
                  </li>
                  <li><a href="#" title="Recycle Bin">Recycle Bin</a></li>
                </ul>
              </li>
            </ul>
          </div>
          
 Expand All Collapse All

The html structure must follows specific format. All tree options and attributes can be defined in the html structure. For more advanced user (developer), you can use the provided API to load tree from HTML and add advanced functionality such as drag & drop, context menu, inline node editing etc. For more information, please check NlsTree documentation.