Tree List · astryx-svelte

Usage

An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.

ts
 
import { TreeList } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Provide meaningful labels and icons for each node to make the hierarchy easy to scan.
Do	Pre-expand important branches so users see key content immediately.
Don't	Nest more than 4–5 levels deep; flatten the structure or use a different pattern.
Don't	Use a tree for flat, non-hierarchical data; use a List instead.

Examples

Common configurations, variations, and states.

TreeList — File Tree With Icons

File browser tree with folder and document icons distinguishing directories from files.

TreeList — Interactive Settings

Settings tree with clickable items and a documentation link.

TreeList — Mailbox Tree

Email folder tree with unread badge counts.

TreeList — Navigation Tree

Navigation tree with a selected item for the current page.

Tree List — Variants

The variant prop controls whether hierarchy guide lines are shown: lineGuides (default) draws connector lines between parent and child rows, while noGuides relies on indentation alone. It is orthogonal to density, which controls spacing.