Tree

Calcite 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, grand children, and great grand children. Parents can expand or collapse to show/hide more items.

Usage

  • Side navigation
  • Filtering
  • Form selection

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Below are important guidelines on using the Tree component.

Avoid Tree in modal dropdown
Avoid putting trees in dropdowns, modals, or other components that are on Level 2 (see Depth)
Avoid Tree more than four levels
Avoid having more than 4 levels deep (great grandchild max)

Accessibility

Keyboard navigation

KeyFunction
Arrow leftIf item has subitems, collapse
Arrow rightIf item has subitems, expand
Arrow topMove focus to previous item. If the current focus is the first item, the focus will not change
Arrow bottomMove focus to previous item. If the current focus is the first item, the focus will exit the component
TabMove focus to next item. If the current focus is the last item, the focus will exit the component
Tab and ShiftMove focus to previous item. If the current focus is the first item, the focus will not change
EnterToggle (expand/collapse) currently focused item

Writing and copy

Correct Tree content length
Do prefer brevity in Trees.
Avoid Tree content length
Avoid long phrases or sentences in Trees.

API reference

calcite-tree
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
inputEnabledinput-enabled
deprecatedUse "ancestors" selection-mode for checkbox input.

Display input

booleanA boolean property should be present, or not
truefalse
lineslines

Display indentation guide lines.

booleanA boolean property should be present, or not
truefalse
scalescale

Specify the scale of the tree.

typedChoose from a set of typed values
lm (default)s
selectionModeselection-mode

Customize how tree selection works.

typedChoose from a set of typed values
View documentation

Events

NameDescriptionDetail
calciteTreeSelect

Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's "detail" property.

bubblescomposedcancelable
TreeSelectDetailView documentation

Slots

NameDescription
default (unnamed)

A slot for `calcite-tree-item` elements.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.