Navigation - Tree Views

Problem

Users need to explore information that is related hierarchically.

Solution

Show information in a structure, such as an accordion or a table, that allows expansion of rows in a tree-like format to show hierarchical relationships.

HTML code here
	

CSS code here
	

Why

A table is a good, well-established way to show a list of items with multiple attributes shown in one view. A tree is a natural way to explore hierarchical information and is also a fairly established way to do this. Some email applications and RSS readers use this approach, so users of those will readily be able to use this; however, due to its visual complexity and minimal affordances, it could be problematic for inexperienced users.

How

You need to use a tree control that supports multiple columns, or a grid control that supports hierarchy.

You can combine this pattern with Sortable Table. As sorting the items for any column but the first will disrupt the tree ordering, you will need to provide a way to go back to the tree view.