Tree

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>
v3.0.3

Best practices

Below are important guidelines on using the Tree component.

Avoid Tree in dialogs dropdown
Avoid placing trees in dropdowns, dialogs, or popovers
Avoid Tree more than four levels
Avoid having more than 4 levels deep (great grandchild max)

Accessibility

Keyboard navigation

KeyFunction
Arrow leftIf the calcite-tree-item has children, all child elements will collapse.
Arrow rightIf the calcite-tree-item has children, all child elements will expand.
Arrow topMoves 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 bottomMoves 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.
HomeMoves focus to the first calcite-tree-item. If the current focus is the first calcite-tree-item, focus will not change.
EndMoves focus to the last calcite-tree-item. If the current focus is the last calcite-tree-item, focus will not change.
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.

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

Properties

PropertyAttributeDescriptionTypeDefault
lineslinesWhen true, displays indentation guide lines.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemsread-onlySpecifies the component's selected items.Array<HTMLCalciteTreeItemElement>
selectionModeselection-modeSpecifies 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

NameDescription
default (unnamed)A slot for calcite-tree-item elements.

Events

NameDescriptionBehavior
calciteTreeSelectFires when the user selects/deselects calcite-tree-items.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close