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.
Usage
- Side navigation
- Filtering
- Form selection
Sample
<calcite-tree>
<calcite-tree-item>East Coast</calcite-tree-item>
<calcite-tree-item>
Midwest
<calcite-tree slot="children">
<calcite-tree-item>Great Lakes</calcite-tree-item>
<calcite-tree-item>Northwoods</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
<calcite-tree-item>
West Coast
<calcite-tree slot="children">
<calcite-tree-item>
California
<calcite-tree slot="children">
<calcite-tree-item>Bay Area</calcite-tree-item>
<calcite-tree-item>Central Valley</calcite-tree-item>
<calcite-tree-item>Inland Empire</calcite-tree-item>
<calcite-tree-item>Trinity Alps</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
<calcite-tree-item>
Pacific Northwest
<calcite-tree slot="children">
<calcite-tree-item>Oregon</calcite-tree-item>
<calcite-tree-item>
Washington
<calcite-tree slot="children">
<calcite-tree-item>Coastal</calcite-tree-item>
<calcite-tree-item>
Inland
<calcite-tree slot="children">
<calcite-tree-item>Mount St. Helens</calcite-tree-item>
<calcite-tree-item>The Enchantments</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
Best practices
Below are important guidelines on using the Tree component.


Accessibility
Keyboard navigation
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 top | 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 bottom | 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


API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
lines | lines | When true , displays indentation guide lines. | boolean | false |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selectedItems | Specifies the component's selected items. | Array<HTMLCalciteTreeItemElement> | ||
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. | "ancestors" | "children" | "multichildren" | "multiple" | "none" | "single" | "single-persist" | "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 . |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |