A tree view is a component-based on nodes that are shown in a hierarchical structure.
The most known example of a tree view is a folder structure for file systems but it can be used for showing any hierarchical relationships.
The tree view provides a way to display information in a hierarchical structure by using collapsible items (nodes). You can navigate between these items using either your mouse device or your keyboard.
A tree view consists of two general elements:
A tree view box is a container that has a defined width and height constraining the nodes within.
A tree view node has the following parts:
The elements within these areas are left-right stacked on the left stack and right-left stacked on the right stack.
These nodes show different color variations when they are setting their states in dark or light scheme.
The nodes should provide an interaction event to be selected. By default, a node is selected clicking the area of the node container and changes to its visual state: selected.
Item icons are displayed in front of the nodes text (after check boxes, if they are shown). We recommend using one icon before the text for the item typologies and one or more icons after the text for item states or indicators.
If multiselection is enabled, the nodes will show checkboxes and multiple checkboxes can be checked. For selections that affect hierarchically use tri-state behavior instead.
Hovering a node can trigger the visibility of elements within it. Frequently is used to show actions related to the node such as “more actions”, “remove”, etc.
If the node is already selected, actions could be shown directly or revealed on hover.
The tree view component can be modified to create several variants. This is a result of modifying the density parameters and the various elements that set up the nodes. Some of them are displayed below.
This variation shows a representation of a hierarchy using user stickers:
This variation shows a section hierarchy of a page customizing some node properties. This way, the Vertical Navigation component can be recreated using Tree View.
This variation shows a hierarchy of items that can be selected directly using buttons. A known example in Liferay products is the Vocabulary tree view within the Category selector in DXP:
All possible actions that can be taken via mouse must be able to do via keyboard.
As a general rule, once the focus enters the Tree View area, the first node item receives focus. Then if the user presses:
For other keys, see the Shortcuts section shown in the documentation.