I have no idea if there’s a term to describe this kind of navigation, but I’ll use “flexmenu” as it’s what the excellent WebGUI CMS calls them, implemented via nested ul / li tags.

I like this method of site navigation as it gives a user the ability to see the entirety of the site along with the ability to zoom in / out easily and bounce between sub-sections.

As you drill down into the page hierarchy, the siblings of each page stay open. I’ll try to illustrate:

At the root, where “1” is the root.

1.1
1.2 <-- User clicks this
1.3
1.4

Next:

1.1
1.2
  1.2.1
  1.2.2
  1.2.3 <-- User clicks this
  1.2.4
  1.2.5
1.3
1.4

That opens up.

1.1
1.2
  1.2.1
  1.2.2
  1.2.3
    1.2.3.1 <-- leaf node
    1.2.3.2 <-- leaf node
    1.2.3.3 <-- leaf node
  1.2.4
  1.2.5
1.3
1.4

User clicks a completely separate part of the tree, and the 1.2 branch closes.

1.1
1.2
1.3 <-- User clicks here
  1.3.1
  1.3.2
  1.3.3
1.4

This is implemented via two snippets- a container and a recursive snippet for each node:

Container Snippet

 <r:if_parent>
 <div id="left-column-nav">
 <r:find url="/">
   <ul>
     <r:snippet name="menu-line" />
   </ul>
 </r:find>
 </div>
 </r:if_parent>

Recursive Snippet, named “menu-line”

 <r:children:each>
   <li<r:if_self> class="active"</r:if_self>><r:link />
       <r:if_ancestor_or_self>
         <r:if_children>
           <ul>
             <r:snippet name="menu-line" />
           </ul>
         </r:if_children>
       </r:if_ancestor_or_self>
   </li>  
 </r:children:each>

To use an example from a real site, when at the page ”/about/people/”, this navigation menu will yield HTML similar to:

<div id="left-column-nav">
  <ul>
    <li><a href="/about/">About</a>
      <ul>
        <li><a href="/about/goals/">Goals</a></li>  
        <li><a href="/about/history/">History</a></li>  
        <li><a href="/about/mission/">Mission</a></li>  
        <li class="active"><a href="/about/people/">People</a>
          <ul>
            <li><a href="/about/people/executive-committee-members/">Executive Committee Members</a></li>  
            <li><a href="/about/people/other-committees/">Other Committees</a></li>  
          </ul>
        </li>  
      </ul>
    </li>  
    <li><a href="/news/">News</a></li>  
    <li><a href="/programs/">Programs</a></li>  
    <li><a href="/publications/">Publications</a></li>  
    <li><a href="/resources/">Resources</a></li>  
    <li><a href="/morville-house/">Morville House</a></li>  
  </ul>
</div>

Nicely nested and easily styled via CSS.