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

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

Slots

Events

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