Always display the collapse and expand button

For proper functionality, a parent-level tree view must include a collapse-and-expand button that uses a chevron icon - regardless of its nesting level. This makes the expected behavior clear when users click an item icon.

Using multiple sources in one tree view

When displaying hierarchical information from different sources, use a single tree view with separate sections and headings. Do not cross-reference sources to avoid confusing users. Single and multi-selection should work as expected within one tree view component.

Customize the root item display

The root (topmost) level of the hierarchy does not always need to be shown or displayed as a tree view item. If the root provides no useful context, hide it or replace it with a section header. In cases such as mixed tree views, the root can serve as a "Back" button.

Drill-in tree views

In some cases, users may need to view different hierarchies depending on context. To support this, let users drill into a tree view item to display a different variation of the tree view within the same panel. Use a navigation controller with a "Back" button to let users return to the previous view.

Iconography

Choose icons that match the object type represented in the tree view. Icons can be unique to specific data types to help clarify meaning for users.

Using thumbnails

Tree view items can display thumbnails instead of icons when users need a content preview. Use icons as a fallback when an image is unavailable, and size them to match the thumbnail. Thumbnails should scale appropriately to the tree view size. For example, an extra-large tree view should not use small thumbnails; in that case, icons may work better.

• Multiple thumbnails may be displayed in line with a tree view item (for example, layer masks). Each thumbnail should be individually selectable and support standard tree view behaviors, including drag-and-drop. Do not use more than three thumbnails per item.

Restrict hierarchy depth

One way to manage overflow is to limit how many levels of hierarchy users can create in a tree view. Some products use this approach to reduce the complexity of deeply nested hierarchies. Setting limits helps when a complex hierarchy is unnecessary for the experience.

Show truncated labels in tooltip

When a label is too long to fit in the tree view, it truncates with an ellipsis. Hovering over or focusing on the item reveals a tooltip with the full label text.

Use an adjustable layout

When a tree view hierarchy may extend beyond the available layout space, use an adjustable layout mechanism such as panels or rails. This lets users modify the layout while preserving visibility of the tree view.

Horizontal scrolling

If you have a layout that doesn't allow for users to adjust the width of the container for a tree view, allow them to horizontally scroll in order to see the full depth of the hierarchy.

Large tree views

When tree views are very large, use a progress circle or a "Show more" control to reveal additional parts when contextually relevant. These loading patterns can apply to the entire tree view or to nested items.

Loading tree view items

If system processes are delaying the display of child tree view items when a parent tree view item is expanded, show a clear indication that the items are in the process of loading.

Sorting

Users should be able to sort a tree view. Sorting should not affect the hierarchical structure since each layer of the hierarchy is sorted individually.

Modifying the tree view

Users may need to modify a tree view directly. They should be able to create new parent or child items, such as groups or folders, and flatten the hierarchy at the item level, such as ungrouping layers. In some cases, users should be able to edit item labels directly.

Any action for modifying the hierarchy should be offered as an explicit control and, if needed, as a keyboard shortcut — but never as a shortcut alone.

Entering into multiple selection mode

Allow users to enter multiple-selection mode explicitly when keyboard shortcuts such as Shift + click are unavailable or when you need to show a different selection type. Do this by toggling the selection style from highlight to checkbox.

Use checkbox selection for modifying a tree view

The checkbox selection style is intended for performing bulk actions on tree view items. Use this option when selection corresponds to bulk actions.

Use a checkbox component when selection doesn't affect tree view items

When you need to provide selection controls within a hierarchy, use a checkbox component instead of the tree view item's label. This should not correspond to selecting specific content and works best for cases like categorized filtering.