Best way to iterate over JSON
You could use a recursive function to traverse your object and generate the HTML.

Something like:

function generateList(items, depth) {
    if (!depth) depth = 0;
    var ul = new Element('ul');
    if (depth) { ul.addClass('here' + depth); }
    for (var i = 0; i &lt; items.length; ++i)
    {
        var item = items[i];
        var li = new Element('li').inject(ul);
        if (item.items) {
            li.adopt(new Element('span', {
                'html' : item.title,
                'class': 'pgTitle'
            }));
            li.adopt(generateList(item.items, depth + 1));
        } else {
            li.adopt(new Element('a', {
                'href' : item.href,
                'title': item.title
            }));
        }
    }
    return ul;
}

if (itemLi.items) {
    generateList(itemLi.items).inject(el);
}


This doesn't include code to add the page spans, cause i don't understand yet how they should be generated.  (The code doesn't include declarations of the variables involved, for starters.)  But it should generate a list of links, with sublists for any items that have sub-items.  The classes for the sublists are kinda unnecessary -- CSS can select them just fine as ul&gt;li&gt;ul and ul&gt;li&gt;ul&gt;li&gt;ul -- so unless you have some other need to track the amount of nesting, you could get rid of depth and the class on the uls.