## Default The `nodes` prop accepts an array of child nodes. Each node should contain `id` and `text` properties. Optional properties include `disabled`, `icon`, and `nodes`. A parent node contains `nodes` (children) while a leaf node does not.
In version 0.86.0, the children prop has been renamed to nodes for Svelte 5 compatibility.
Every node must have a unique id.
## Slottable node By default, each item renders the value of `node.text`. Use the data from `let:node` directive to override the default slot. The destructured `let:node` contains the following properties: id: the node id text: the node text expanded: true if the node is expanded leaf: true if the node does not have child nodes disabled: true if the node is disabled selected: true if the node is selected ## Initial active node The active node can be set through `activeId`. ## Compact size Set `size` to `"compact"` to use the compact variant. ## With icons To render a node with an icon, define an `icon` property with a Carbon Svelte icon as its value. ## Initial expanded nodes Expanded nodes can be set using `expandedIds`. ## Initial multiple selected nodes Initial multiple selected nodes can be set using `selectedIds`. ## Expand all nodes To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` accessor. ## Collapse all nodes Similarly, invoke `TreeView.collapseAll()` to collapse all nodes. ## Expand a subset of nodes Use the `TreeView.expandNodes` method to expand only a subset of nodes. The method accepts an argument that takes a node and returns a boolean. If no argument is provided, all nodes will be expanded. ## Collapse a subset of nodes Use the `TreeView.collapseNodes` method to collapse a subset of nodes. If no argument is provided, all nodes will be collapsed. ## Show a specific node Use the `TreeView.showNode` method to show a specific node. If a matching node is found, it will be expanded, selected, and focused.