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)
  • Branch Two (div)
<div class="neo-treeview">
<ul
aria-label="Nested Tree"
id="e848361b-421d-4635-bfd3-be85898a5377"
role="tree"
>
<li
dir="ltr"
role="treeitem"
aria-selected="false"
class="neo-treeview__sub-tree-item"
>
<div class="neo-treeview__item">
<span
class="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>
<ul
aria-expanded="false"
role="group"
>
<li
class="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>
<li
dir="ltr"
role="treeitem"
aria-selected="false"
class="neo-treeview__sub-tree-item"
>
<div class="neo-treeview__item">
<span
class="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>
<ul
aria-expanded="false"
role="group"
>
<li
class="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>
<li
dir="ltr"
role="treeitem"
aria-selected="false"
class="neo-treeview__sub-tree-item"
>
<div class="neo-treeview__item neo-treeview__item--disabled">
<span
class="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>
<ul
aria-expanded="false"
role="group"
>
<li
class="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>
<li
class="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.

Displays the anatomy of a tree view
  • 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
Tree view with default states look like this
Hover
Tree view with hover states look like this
Disabled
Tree view with disabled states look like this
Active - Enabled
Tree view with active and enabled states look like this
Active - Hover
Tree view with active and hover states look like this
Active - Disabled
Tree view with active and disabled states look like this
  • 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.

Image showing correct tree hierarchy

DO: Use tree views to display the levels of a hierarchical menu.

Image showing improper tree hierarchy

DON'T: Do not use the tree view as the primary method of navigation in an application, or instead of an accordion.

Image showing correct chevron use

DO: Always display the chevron icon to indicate a tree view parent with child items.

Image showing lack of a chevron

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.

Image showing proper tree nesting

DO: Minimize the number of levels when possible.

Image showing overly nested trees

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.

Image showing proper us of select and multiselect

DO: Display an indeterminate checkbox in the parent when one or more child items are selected.

Image showing parent objects not selected but child object is

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.

Image showing tree view movement through similar children components

DO: A tree view node can be dragged within the same level.

Image showing tree view movement of a child to a parent

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.

Image showing correct overflow where the words do not get cut off

DO: Use concise labels within the tree view. Labels can wrap to a second line if needed (such as for translated text).

Image showing improper overflow with the words being cut off

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.

Image showing correct use of icons on all elements

DO: Use consistent treatment within the tree view. Only use icons when it adds value and has a strong association with the label.

Image showing improper use of icons on only some elements

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.

Shows layout and spacing within a tree view component.

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.

Level 1 Tree View Item
Shows a 8 pixel spacing before the chevron
Level 2 Tree View Item
Shows a 32 pixel spacing before the chevron
Level 3 Tree View Item
Shows a 56 pixel spacing before the chevron

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.

Components