Tree View

Hierarchical list with expandable/collapsible nodes.

Demo

Documents
- report.pdf
- notes.txt
Images
- photo.jpg
readme.md

Usage

let expanded = @resource.signal(@immut/hashmap.new())
let selected = @resource.signal("")

@styled_treeview.treeview(
  [
    @styled_treeview.tree_node("docs", "Documents", children=[
      @styled_treeview.tree_node("report", "report.pdf"),
      @styled_treeview.tree_node("notes", "notes.txt"),
    ]),
    @styled_treeview.tree_node("images", "Images", children=[
      @styled_treeview.tree_node("photo", "photo.jpg"),
    ]),
    @styled_treeview.tree_node("readme", "readme.md"),
  ],
  expanded,
  selected,
  aria_label="File browser",
)

Props

Prop	Type	Default	Description
nodes	Array[TreeNode]	-	Tree data
expanded	Signal[Map[String, Bool]]	-	Expansion state
selected	Signal[String]	-	Selected node ID
aria_label	String?	None	Accessible label
class	String?	None	Additional CSS class

BEM Classes

Class	Description
`.treeview`	Root container
`.treeview__item`	Tree item (li)
`.treeview__row`	Clickable row
`.treeview__icon`	Expand/collapse icon
`.treeview__label`	Item label
`.treeview__group`	Child container

States

State	Description
`data-expanded="true"`	Node expanded
`data-expanded="false"`	Node collapsed
`data-selected="true"`	Node selected
`data-depth="N"`	Nesting level

Keyboard

Key	Action
Arrow Down	Next visible item
Arrow Up	Previous visible item
Arrow Right	Expand or first child
Arrow Left	Collapse or parent
Home	First item
End	Last visible item
Enter/Space	Select item