Tree | Calcite Design System

Trees are nestable, expandable text groups that can contain multiple links for navigation or items for filtering.

Overview

Tree can be used as a filtering component, navigation, or for use in form selection. They are built like a "family tree" in that there are parents, children, grandchildren, and great grandchildren. Parents can expand or collapse to show/hide more items.

Sample

Usage

Side navigation
Filtering
Form selection

Best practices

Below are important guidelines on using the Tree component.

Avoid placing trees in dropdowns, dialogs, or popovers

Avoid having more than 4 levels deep (great grandchild max)

Accessibility

Key	Function
`Arrow left`	If the `calcite-tree-item` has children, all child elements will collapse.
`Arrow right`	If the `calcite-tree-item` has children, all child elements will expand.
`Arrow up`	Moves focus to the previous `calcite-tree-item`, including `expanded` child elements. If the current focus is the first `calcite-tree-item`, focus will not change.
`Arrow down`	Moves focus to the next `calcite-tree-item`, including `expanded` child elements. If the current focus is the last `calcite-tree-item`, focus will not change.
`Home`	Moves focus to the first `calcite-tree-item`. If the current focus is the first `calcite-tree-item`, focus will not change.
`End`	Moves focus to the last `calcite-tree-item`. If the current focus is the last `calcite-tree-item`, focus will not change.
`Tab`	Moves focus in and out of the component.
`Tab` and `Shift`	Moves focus in and out of the component.

Writing and copy

Do prefer brevity in Trees.

Avoid long phrases or sentences in Trees.

API reference

Properties

Property	Attribute	Description	Type	Default
lines	lines	When `true`, displays indentation guide lines.	`boolean`	`false`
scale	scale	Specifies the component's size.	`Scale`	`"m"`
selectedItemsread-only		Specifies the component's selected items.	`TreeItem[]`
selectionMode	selection-mode	Specifies the selection mode of the component, where: `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection.	`SelectionMode`	`"single"`

Slots

Name	Description
default (unnamed)	A slot for `calcite-tree-item` elements.

Events

Name	Description	Behavior
calciteTreeSelect	Fires when the user selects/deselects `calcite-tree-items`.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Create a promise that resolves once component is fully loaded.	`componentOnReady(): Promise<this>`