Tree View
A tree view is a hierarchical structure that allows users to view content across various levels. Major headings are at the top level, with lesser but related sections appearing beneath. All child items are related to the parent.
Interactive Playground
The Interactive Playground allows you to experiment with various tree view styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.
- Branch One (string)
- leaf one
- Branch Two (div)
- leaf two
- Branch Three (string)
- leaf three
- leaf four
<div class="neo-treeview"><ularia-label="Nested Tree"id="aa80cef5-7e03-40fb-8b94-e828eaf76c5e"role="tree"><lidir="ltr"role="treeitem"aria-selected="false"class="neo-treeview__sub-tree-item"><div class="neo-treeview__item"><spanclass="neo-treeview__item-left"role="button"tabindex="-1"><span class="neo-treeview__item--expandable"></span>Branch One (string)</span><span class="neo-treeview__item-right"></span></div><ularia-expanded="false"role="group"><liclass="neo-treeview__item neo-treeview__item--disabled"dir="ltr"role="treeitem"aria-selected="false"tabindex="-1"><span class="neo-treeview__item-left">leaf one</span></li></ul></li><lidir="ltr"role="treeitem"aria-selected="false"class="neo-treeview__sub-tree-item"><div class="neo-treeview__item"><spanclass="neo-treeview__item-left"role="button"tabindex="-1"><span class="neo-treeview__item--expandable"></span><div><b>Branch Two</b>(div)</div></span><span class="neo-treeview__item-right"></span></div><ularia-expanded="false"role="group"><liclass="neo-treeview__item neo-treeview__item--disabled"dir="ltr"role="treeitem"aria-selected="false"tabindex="-1"><span class="neo-treeview__item-left">leaf two</span></li><lidir="ltr"role="treeitem"aria-selected="false"class="neo-treeview__sub-tree-item"><div class="neo-treeview__item neo-treeview__item--disabled"><spanclass="neo-treeview__item-left"role="button"tabindex="-1"><span class="neo-treeview__item--expandable"></span>Branch Three (string)</span><span class="neo-treeview__item-right"></span></div><ularia-expanded="false"role="group"><liclass="neo-treeview__item neo-treeview__item--disabled"dir="ltr"role="treeitem"aria-selected="false"tabindex="-1"><span class="neo-treeview__item-left">leaf three</span></li></ul></li><liclass="neo-treeview__item neo-treeview__item--disabled"dir="ltr"role="treeitem"aria-selected="false"tabindex="-1"><span class="neo-treeview__item-left">leaf four</span></li></ul></li></ul></div>
<Tree aria-label="Nested Tree"><Branch title="Branch One (string)"><Leaf>leaf one</Leaf></Branch><Branch title={<div><b>Branch Two</b>{' '}(div)</div>}><Leaf>leaf two</Leaf><Branch title="Branch Three (string)"><Leaf>leaf three</Leaf></Branch><Leaf>leaf four</Leaf></Branch></Tree>
Anatomy
A tree view component is a design element that displays data in a hierarchical, tree-like structure. Each item in the tree is represented by a node or a branch. Similar related child items are grouped beneath an encompassing parent.
Status indicator:
The bar to the left indicates that this item is currently selected.Drag icon:
Users can click and drag tree view items to change their location on the list, or to move items to a different parent.Collapse and expand button:
Use this icon to show the child items on a lower branch.Selector Options:
Users can select one-or-more items. It can be a checkbox or a radio button. This box contains a dash when child items are selected.Label Icon (optional):
Adding an icon helps the user quickly identify the information the item contains.Label:
This is the title of the category or list item, saying what information or function it contains.Actions Area:
This area can include actions and other functions, such as a switch or a chip.
States
This component can be displayed in one of six states.
Enabled:
This is the default state. The item can be selected or expanded.Hover:
Moving the mouse over the item changes it to the Hover state. There is no hover state when using keyboard navigation.Disabled:
If the field cannot be selected, use the Disabled state. Another action or setting must be made to enable the field.Active - Enabled:
This is the item currently selected. Click to open the child menu where there is one.Active - Hover:
Moving the mouse over the active field changes it to the Active-Hover state.Active - Disabled:
The field is active but cannot be unselected or modified.
Behavior
Tree View has different behaviors that determine how it interacts with the user. The following examples show several implementations.
DO: Use tree views to display the levels of a hierarchical menu.
DON'T: Do not use the tree view as the primary method of navigation in an application, or instead of an accordion.
DO: Always display the chevron icon to indicate a tree view parent with child items.
DON'T: Do not use collapsible tree view items without a chevron. Do not replace the chevron with another icon.
Nested
The tree view provides a means to show an organized list of items. Each parent can have one or more child items nested underneath. Each parent may be the child of another parent above it in the hierarchy.
DO: Minimize the number of levels when possible.
DON'T: Do not use too many levels unless it is for user-generated information. Consolidate the layers instead.
Select and Multiselect
Items in the tree view can be configured with checkboxes where more than one selection is allowed. Each selected child will have a check in the box. A parent with selected child elements is displayed with an Indeterminate checkbox.
DO: Display an indeterminate checkbox in the parent when one or more child items are selected.
DON'T: Do not display the parent without indicating its indeterminate state.
Interactions
Both parent and child items can be dragged to a new location providing the element stays in the same level of the tree. It can be moved to another branch of the tree providing it is at the same level.
DO: A tree view node can be dragged within the same level.
DON'T: Do not move a tree view node to a different level.
Overflow
Try to keep the labels short enough to appear on a single line within the tree view. The text can be wrapped to a second line when it is necessary.
DO: Use concise labels within the tree view. Labels can wrap to a second line if needed (such as for translated text).
DON'T: Do not use the helper text to indicate an error without providing enough information to fix the problem.
Icons
Icons can be added to the items in the tree view to help the user readily identify each element.
DO: Use consistent treatment within the tree view. Only use icons when it adds value and has a strong association with the label.
DON'T: Do not add icons to only some items in the tree view. Do not use them for decoration.
Specs
Tree view items have the size and padding shown here.
Each layer within the tree is progressively indented to accentuate the hierarchy of the list. Each layer is indented 24 px beyond the previous layer.
Keyboard Interactions
Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.
Keyboard navigation employs the following shortcuts.
Keystrokes | Interaction |
---|---|
Tab | Moves into the tree view, or to any elements such as buttons. |
Shift + Tab | Moves to the previous interactive element. |
Enter | Activate the tree item’s default action. |
→ Right Arrow | Opens a tree item if closed, or moves focus to the first child if open. If at the end, does nothing. |
← Left Arrow | Closes a tree item if open, or moves focus to the parent item if closed. If at the root item, does nothing. |
↑ Up and ↓ Down Arrow | Moves between the tree view items without opening or closing them. |
Home | Moves focus to the first tree view item without opening or closing it. |
End | Move focus to the last tree view item without opening or closing it. |