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
Best practices
Below are important guidelines on using the Tree component.


Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow left | If item has subitems, collapse |
Arrow right | If item has subitems, expand |
Arrow top | Move focus to previous item. If the current focus is the first item, the focus will not change |
Arrow bottom | Move focus to previous item. If the current focus is the first item, the focus will exit the component |
Tab | Move focus to next item. If the current focus is the last item, the focus will exit the component |
Tab and Shift | Move focus to previous item. If the current focus is the first item, the focus will not change |
Enter | Toggle (expand/collapse) currently focused item |
Writing and copy


API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
inputEnabled | input-enabled | Display input | true false | |
lines | lines | Display indentation guide lines. | true false | |
scale | scale | Specify the scale of the tree. | l m (default) s | |
selectionMode | selection-mode | Customize how tree selection works. |
Events
Name | Description | Detail |
---|---|---|
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. | TreeSelectDetail |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for `calcite-tree-item` elements. |