Tree view
A tree view provides users with a way to navigate nested hierarchical information.

Anatomy#

Options#
Table of options#
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
Composition#
Behaviors#

Collapse and expand#
Clicking the collapse and expand button will expand or collapse a tree view item that contains child tree view items.

Drag and drop#
Tree view items can be dragged and dropped as a way for reordering or restructuring the hierarchy. Multiple tree view items can be dragged and reordered simultaneously. When selecting tree view items in different hierarchies, dropping them in a new location will flatten their hierarchical relationship with one another as sibling children of the tree view item that they were dropped into.
Tree views should also accept dropped items from outside the component in order to create new tree view items (e.g., dropping a new file into a tree view in order to upload a file to a specific folder).

Drag icon focus#
When using this option for a tree view, the drag icon receives keyboard focus in order to allow for a keyboard-based drag-and-drop interaction.

Text overflow#
When a tree view item label is too long for the available horizontal space, the label truncates. The full label is displayed on hover and focus within a tooltip.
Usage guidelines#
Always display the collapse and expand button#
For proper functionality, a tree view needs to display the collapse and expand button, which uses a chevron icon. This makes it clear to a user as to what kind of behavior to expect when they click on the icon of a tree view item.


Use the chevron icon to show how to toggle the collapse/expand behavior.


Don't remove or replace the chevron icon with unique iconography.
Using multiple sources in one tree view#
If you need to display hierarchical information from different sources, display them in a single tree view as separate sections with section headings. These sources should not cross-reference each other so that you don’t confuse users. Single selection and multi-selection should work as expected for a single tree view component.


Separate tree views into sections with headings.
Customize the root item display#
The root (topmost) level of the hierarchy doesn't always need to be displayed, nor be displayed as a tree view item. In some cases, the root does not provide a user with any context and it can be hidden or replaced with a section header. In other cases, such as with mixing tree views, the root can be displayed as a “back” button.


Use a heading and unique icon for showing a root item.
Drill-in tree views#
Sometimes it's necessary to show different hierarchical displays based on the context of what a user is navigating. In those cases, allow for a user to replace a tree view item by “driling" into it, displaying a different variation of the tree view within the same panel. Place the tree view within a navigation controller (which should provide a “back" button) to enable this type of drill-in navigation.


Display a tree view within a navigation controller for drill-in views.
Iconography#
Choose icons that relate to the object type being represented in the tree view. These icons can be unique to specific data types, to add better clarification for users.


Use an icon that correlates to the type of object being shown.
Using thumbnails#
Tree view items can show thumbnails as an alternative to icons. Thumbnails are best used when a user needs to have a preview of the content represented by the tree view item. Icons can be used as a fallback for when an image is unavailable, but should be appropriately sized to match the thumbnail.


Use thumbnails to preview content.
Be mindful of thumbnail size and proportions#
Tree views with thumbnails should use a thumbnail size that is appropriate to the size of the tree view itself. For example, an extra-large tree view would not work well with small thumbnails; those proportions may be better suited for using icons instead.


Don’t use large thumbnails in a small tree view.
Multiple thumbnails#
In some cases, multiple thumbnails need to be displayed in-line with the tree view item (e.g., layer masks). These thumbnails should be individually selectable and inherit all other behaviors of a standard tree view item, such as drag-and-drop behavior. Don't use more than 3 thumbnails per tree view item.


Separate multiple thumbnails with an indicator.
Restrict hierarchy depth#
One way to address overflow is to set a limit on how many levels of hierarchy deep that a user can create in a tree view. Some products use this method to mitigate the complexity that comes with deeply-nested hierarchies. Limits can help for when having a complex hierarchy isn’t necessary to an experience.


Restrict hierarchy depth when appropriate.
Show truncated labels in tooltip#
When a label's length is too long to display within the tree view, the text will truncate at the end using an ellipsis. Hovering over or focusing on the truncated tree view item should reveal a tooltip that shows the full text of the label.


Show truncated labels using a tooltip.
Use an adjustable layout#
When a user’s tree view hierarchy could be deeper than the available space in the layout, use an adjustable layout mechanism like panels or rails. This will allow users to modify the layout and still preserve visibility on their tree view.


Use an adjustable layout for deeply-nested hierarchies.
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.


Allow horizontal scrolling in a fixed layout.
Large tree views#
When tree views are very large, use a progress circle or a "show more" affordance to show additional parts when it’s contextually relevant. These loading patterns can apply to the entire tree view, or to nested tree view items.


Display a progress circle when loading large tree views.
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.


Show a progress circle when waiting for tree view data to load.
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.


Sort at the individual layers of the hierarchy.
Filtering#
Users should be able to filter a tree view’s content in order to quickly find the items they're looking for. When filtering hides sections of the hierarchical structure, the remaining tree view items are displayed as a root item. If filtering doesn't remove structures, the hierarchical relationships are still retained.


Flatten or retain hierarchy in filter results.
Modifying the tree view#
Users may need to be able to directly modify a tree view. They should be able to create new parent or child tree view items, such as a grouping or a folder. They should also be able to flatten the hierarchy at an individual tree view item level (e.g., ungrouping a group of layers). In some cases, the tree view item labels should be editable by the user.
Any action for modifying the hierarchy should be presented as both an explicit action as well as keyboard shortcuts (if needed), but never as keyboard shortcuts alone.


Use persistent actions to allow for modification to the hierarchy.
Entering into multiple selection mode#
Allow users to explicitly enter a multiple selection mode when keyboard shortcuts (Shift + click) are unavailable, or when you want to display a unique kind of selection. Do this by toggling between the selection style, from highlight to checkbox.


Allow users to enter multiple selection mode.
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 checkbox selection for modifying items in a tree view.
Use a checkbox component when selection doesn't affect tree view items#
When you need to provide selection controls within a hierarchy, use a


Use a checkbox component for selecting hierarchical options.
Internationalization#
Keyboard interactions#
Changelog#
- Updated all colors to 6.0.0
- Added size, drag icon, selection mode, selection style, and selection behavior options
- Replaced quiet option with emphasis (changes default)
- Renamed standalone option as detached
- This component has been added to the website
Design checklist#

All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes
Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design
UI language and information design considerations have been incorporated into component design.

Defined options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit
Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.