Navigation

Tree View

Planned

Hidden 'off canvas' panels can appear from any side of the viewport (top, right, bottom, or left). They can be dismissed by a close button and/or by clicking outside. Their control button can be within the component, or in a separate component. Offcanvas panels can also be overridden, so that they become like a normal ('on canvas') panel within the document flow above a nominated breakpoint.

  • Design Files
    • Production Ready
    • Work in Progress
  • Archive

Options

Text Only

A tree view is text-only by default. This option is best used when a hierarchy consists of all of the same content type.

Icons

Icons can be used to add clarification about tree view items. These help to signify content types, which creates easier reference and context within the hierarchy.

Thumbnails

Use thumbnails for when a user needs to have a preview of the content contained in a tree view item. Thumbnails are primarily used in experiences such as layer panels.

Detached

When a tree view is used outside of a panel (no borders on the left and right sides), the detached option will display the tree view items with rounded corners. A tree view is used inside of a panel by default, spanning from edge to edge.

Emphasis

By default, a tree view is not emphasized. This is optimal for when it's used with a clear indication of selected items elsewhere in the interface (e.g., a main/detail split view in which the selected item’s label is repeated or clearly indicated in the detail view). The emphasized tree view has a translucent blue background and blue border for its selected state, to provide visual prominence that meets accessible color contrast ratio. This is optimal for when the selection should call attention (e.g., selecting a file to upload from a tree view, or when the tree view is the sole UI element for the interaction with the hierarchical content).

Size

A tree view comes in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Drag Icon

Tree view items can display a drag icon, if necessary. The drag icon provides a keyboard-navigable indicator when multiple actions can be taken on a single tree view item. It only appears on hover, down, and keyboard focus states.

Selection

Tree views have the option of being either single-select or multi-select, for both checkbox and highlight selection styles. The default selection behavior for a multi-select tree view is to toggle selection on and off when selecting an item. The default selection behavior for a single-select tree view is to replace the current selection with the new selection.

Checkbox or Highlight Style

Some tree views let a user select items, on which they can then take an action. Both single-select and multi-select tree views can display checkboxes to the far left side of each item, or display only a highlight state. With the checkbox selection style, clicking another tree view item will add that item to the selection. Clicking a selected tree view item will deselect it. Sometimes it may not make sense to use checkboxes to indicate selection. In those cases, use the highlight selection style to display a highlighted state when a user is selecting one or more items. With this option, clicking another tree view item will select the new item and deselect any existing selection by default. For the highlight selection style, use the emphasized option in order to meet contrast minimums. All tree views have a hover state, regardless if actions or selections can be made./p>

Composition

Label Area

The label area is reserved for the text that acts as the label of the tree view item. In rare cases, additional components can be placed in this area (e.g., badges). This area is placed on the right side for RTL languages

Context Area

The context area is reserved for icons or thumbnails that provide additional contextual information about the individual tree view item.

Actions Area

The actions area is reserved for an action button or action group. This area houses actions that can be taken on the tree view item.

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).

Actions Area

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.

Implementation

Example Name

Description and implementation notes

<p> code example </p>

Information

Checklist

All interactive states

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

All Color Schemes

Works properly across all color schemes (light, dark).

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).

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 Figma file that shows multiple options, states, color themes, and platform scales.