Tree View

Browse and select nested hierarchical data.

Tree View displays nested data such as files, routes, categories, or organizational structure while keeping parent-child relationships visible. People can expand only the branches they need and select a specific node.

Variants and behaviour

Tree View uses one semantic tree pattern rather than visual variants. The items data supplies children and disabled nodes, while selected and expanded bindings expose the current node and open branches to parent state.

Customization

Use stable ids and concise labels for every node, and shape the hierarchy before passing it to the component. Bind selection to the content pane it controls, and initialize expanded with the branches that should be visible on entry.

Examples

Installation

Install the package, then import only the components a route uses. Exports are tree-shakable.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { TreeView } from 'fractalsvelte';
</script>

Usage

<script lang="ts">
	import { TreeView } from 'fractalsvelte';
</script>

<TreeView
	items={[{ id: "src", label: "src", children: [{ id: "routes", label: "routes" }] }]}
	expanded={["src"]}
/>

Props

Prop	Type	Default	Description
`items`	`TreeItem[]`	`-`	Nested nodes to display in the tree.
`selected`	`string`	`-`	Selected item id. Supports bind:.
`expanded`	`string[]`	`[]`	Expanded branch ids. Supports bind:.
`reorderable`	`boolean`	`false`	Enables before, inside, and after tree moves by pointer and sibling keyboard reordering with Control + Arrow keys.
`onreorder`	`(items: TreeItem[]) => void`	`-`	Receives the immutable tree after a successful move.
`onchange`	`(id: string) => void`	`-`	Called when a node is selected.
`onexpandedchange`	`(ids: string[]) => void`	`-`	Called when a branch is expanded or collapsed.