PhiaUi.Components.Tree (phia_ui v0.1.17)

Tree component for displaying hierarchical data with expandable/collapsible nodes.

Uses native HTML <details>/<summary> for zero-JavaScript expand/collapse. The browser handles toggle natively — no Phoenix hooks required.

Sub-components

Function	Element	Purpose
`tree/1`	`ul`	Root container with `role="tree"`
`tree_item/1`	`li`	Leaf node or expandable branch

Example

<.tree id="file-tree">
  <.tree_item label="src" expandable={true} expanded={true}>
    <.tree_item label="components" expandable={true}>
      <.tree_item label="button.ex" on_click="open_file" value="button.ex" />
    </.tree_item>
    <.tree_item label="app.ex" value="app.ex" />
  </.tree_item>
  <.tree_item label="mix.exs" value="mix.exs" />
</.tree>

Expandable Items

Pass expandable={true} to render a branch node using <details>/<summary>. The expanded attribute controls the initial open/closed state server-side.

<.tree_item label="src" expandable={true} expanded={true}>
  <.tree_item label="app.ex" />
</.tree_item>

Leaf Items

Leaf nodes can fire Phoenix events via on_click and pass a value:

<.tree_item label="button.ex" on_click="open_file" value="button.ex" />

Indentation

CSS handles indentation via <ul role="group" class="ml-4"> nesting — no level prop needed.

Accessibility

Root <ul> uses role="tree"
Each <li> uses role="treeitem"
Expandable items use aria-expanded to reflect open/closed state
Nested item groups use role="group"
Chevron SVG is presentational (no ARIA label needed)

Summary

Functions

tree(assigns)

Renders the tree root container.

tree_item(assigns)

Renders a tree item — either a leaf node or an expandable branch.

Functions

tree(assigns)

Renders the tree root container.

The root element is a <ul> with role="tree" for ARIA semantics.

Attributes

id (:string) (required) - Unique ID for the root tree element.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Extra HTML attributes forwarded to the root <ul>.

Slots

inner_block (required) - tree_item/1 sub-components.

tree_item(assigns)

Renders a tree item — either a leaf node or an expandable branch.

Leaf nodes render a simple <li> with a clickable row. When on_click is provided, the row fires a Phoenix event with phx-value-value={@value}.

Branch nodes (when expandable={true}) use <details>/<summary> for zero-JavaScript expand/collapse. The expanded attribute sets the initial state. Nested items are rendered inside <ul role="group" class="ml-4">.

Attributes

label (:string) (required) - Display text for the tree item.
expandable (:boolean) - When true, renders a branch node using <details>/<summary>. Defaults to false.
expanded (:boolean) - Initial open/closed state for expandable items (server-side). Defaults to false.
on_click (:string) - Phoenix event name to fire when a leaf item is clicked. Defaults to nil.
value (:string) - Value passed as phx-value-value on click events. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.

Slots

inner_block - Nested tree_item/1 components for expandable branches.