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
Anatomy
States
Behavior
Specs
Keyboard Interactions
Related Content

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">
  <ul
    aria-label="Nested Tree"
    id="fd953200-9f58-400d-bb03-be1eb87ad96b"
    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.

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

Disabled

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.

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.

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.

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.

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.

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

Level 2 Tree View Item

Level 3 Tree View Item

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.