Navigation Tree


The user needs to find an item in the main navigation


Vertically stack sections and open up one at the time while collapsing the other sections

From Google Suggest

Use when

Part of Main Navigation. Alternative to Navigation Tree


tbw - Animation - Keboard navigation - Timing



More Examples

At the Kandiqueen website, bla...:




Kevin Hoyt: Thoughts on Accordion Usability

Also known as

Closable Panels

Code examples

DHTML Accordion Menu 2.0 ASP.NET: Accordion Sample
Spry: Accordion Sample

plml logo


3 comments have been added to this pattern

Tyler Wright, 9th January 2009
The solution and the examples don't match at all. Literature seems irrelevant as well. You might want to clean up this pattern a bit, the others on this site are much more clear and useful.
Dimitri Visser, 16th February 2010
I concur with Tyler Wright. I was looking for some old fashioned examples of the tree navigation pattern
Keith Gill, 26th January 2011
One of the most notable instances of the Tree Navigation pattern would have to be that of the Windows "Explorer" pane.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below