Tree View
A hierarchical list of nested items, where each item can have additional children elements.
Project Structure
Features
- Full keyboard functionality
- Select individual items
Anatomy
- Tree: The container in which the tree lies.
- Label: The element that describes the tree.
- Item: The individual tree item element.
- Group: An element where a subtree is nested.
API Reference
createTreeViewBuilder
The builder function used to create the tree-view component.
Props
Prop | Default | Type / Description |
forceVisible | false | boolean Whether or not to force the tree-view to always be visible. This is useful for custom transitions and animations using conditional blocks. |
Elements
States
State | Description |
collapsedGroups | The list of IDs of items, who have a group that is not expanded. |
focusedItem | The list item that is currently focused. |
selectedItem | The list item that is currently selected. |
Helpers
Helper | Description |
isCollapsedGroup | A derived store that returns a function that returns whether or not the item is collapsed. |
isSelected | A derived store that returns a function that returns whether or not the item is selected. |
tree
The tree
- element.
Data Attributes
Data Attribute | Value |
[data-melt-id] | A unique ID. |
item
The list tree item.
Props
Prop | Default | Type / Description |
id | - | string The unique ID of the item. |
Data Attributes
Data Attribute | Value |
[data-id] | A unique ID. |
[data-value] | The value of the tree item. |
Custom Events
Event | Value |
m-keydown | (e: ) => void |
m-click | (e: ) => void |
group
The list group item.
Props
Prop | Default | Type / Description |
id | - | string The unique ID of the group. Must match the ID of the item it belongs to. |
Data Attributes
Data Attribute | Value |
[data-group-id] | The unique ID of the list item the group belongs to. |
Accessibility
Adheres to the Tree View WAI-ARIA design pattern
Key | Behavior |
Enter | Selects the node. |
Space | Selects the node. |
ArrowDown | Moves focus to the next node that is focusable without opening or closing a node. If focus is on the last node, does nothing. |
ArrowUp | Moves focus to the previous node that is focusable without opening or closing a node. If focus is on the first node, does nothing. |
ArrowRight | When focus is on a closed node, opens the node; focus does not move. When focus is on a open node, moves focus to the first child node. When focus is on an end node, does nothing. |
ArrowLeft | When focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing. |
Home | Moves focus to first node without opening or closing a node. |
End | Moves focus to the last node that can be focused without expanding any nodes that are closed. |
A-Z | Focus moves to the next node with a name that starts with the typed character. Search wraps to first node if a matching name is not found among the nodes that follow the focused node. Search ignores nodes that are descendants of closed nodes. |
On This Page