Renders a tree. Nest tree_item/1 components inside; items with children become expandable branches.

<.tree id="files" label="Project files" on_select={JS.push("open")}>
  <.tree_item value="src" label="src" expanded>
    <:icon><.icon name="folder" /></:icon>
    <.tree_item value="src/app.ex" label="app.ex" />
    <.tree_item value="src/app_web" label="app_web">
      <.tree_item value="src/app_web/router.ex" label="router.ex" />
    </.tree_item>
  </.tree_item>
  <.tree_item value="mix.exs" label="mix.exs" navigate={~p"/files/mix.exs"} />
</.tree>

Selection is client-owned by default: clicking or pressing Enter/Space selects an item and runs on_select with phx-value-value set to the item's value (phx-value-* from on_select's target are included too). Pass selected to make the server own it instead: the tree then follows the assign and on_select is how you update it. Items with navigate, patch or href are links and work without JavaScript.

Keyboard: ArrowUp/ArrowDown move, ArrowRight expands or moves into a branch, ArrowLeft collapses or moves to the parent, Home/End jump, * expands every sibling, typing jumps to the next item starting with those letters, Enter/Space select (Enter also toggles a branch or follows a link).

Attributes

• id (:string) (required)
• label (:string) - accessible name; or use labelledby. Defaults to nil.
• labelledby (:string) - Defaults to nil.
• selected (:any) - server-owned selected value. Defaults to nil.
• expanded_all (:boolean) - start with every branch open. Defaults to false.
• on_select (Phoenix.LiveView.JS) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

An item in a tree/1. Children (nested tree_items in the inner block) make it a branch that can expand and collapse.

<.tree_item value="docs" label="Docs" expanded>
  <:icon><.icon name="folder" /></:icon>
  <.tree_item value="docs/readme" label="README.md" />
</.tree_item>

Attributes

• value (:string) (required)
• label (:string) (required)
• expanded (:boolean) - Defaults to false.
• selected (:boolean) - Defaults to false.
• disabled (:boolean) - Defaults to false.
• href (:any) - Defaults to nil.
• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["method", "download", "target"].

Slots

• icon
• inner_block