Phoenix implementation of Zag.js Tree View.

Examples

Basic

Pass items as Corex.Tree.new/1. Component id is the tree root id; names are capitalized from item labels.

<.tree_view
  id="my-tree"
  class="tree-view"
  items={Corex.Tree.new([
    [label: "Components", id: "components", children: [
      [label: "Accordion", id: "accordion"],
      [label: "Checkbox", id: "checkbox"],
      [label: "Menu", id: "menu"],
      [label: "Tree view", id: "tree-view"]
    ]],
    [label: "Form", id: "form"],
    [label: "Content", id: "content", children: [[label: "Content.Item", id: "content-item"]]],
    [label: "Tree", id: "tree", children: [[label: "Tree.Item", id: "tree-item"]]]
  ])}
/>

Use as Navigation

Set redirect so selection navigates to the item value (URL). Use item redirect: false to disable, new_tab: true to open in new tab.

Controller

When not connected to LiveView, the hook automatically performs a full page redirect via window.location.

<.tree_view id="my-tree" class="tree-view" redirect items={Corex.Tree.new([
  [label: "Docs", id: "/docs"],
  [label: "External", id: "https://example.com", new_tab: true]
])}>
  <:label>My Documents</:label>
</.tree_view>

LiveView

When connected to LiveView, use on_selection_change and redirect in the callback. The payload contains value["selectedValue"] (list); use the first element for the destination URL.

defmodule MyAppWeb.NavLive do
  use MyAppWeb, :live_view

  def handle_event("handle_menu", %{"value" => value}, socket) do
    if value["isItem"] do
      path = Enum.at(value["selectedValue"], 0)
      {:noreply, push_navigate(socket, to: path)}
    else
      {:noreply, socket}
    end
  end

  def render(assigns) do
    ~H"""
    <.tree_view
      id="nav-tree"
      class="tree-view"
      redirect
      on_selection_change="handle_menu"
      value={[@current_path]}
      items={Corex.Tree.new([
        [label: "Home", id: "/"],
        [label: "Docs", id: "/docs"]
      ])}
    >
      <:label>Navigation</:label>
    </.tree_view>
    """
  end
end

Styling

Use data attributes to target elements:

[data-scope="tree-view"][data-part="root"] {}
[data-scope="tree-view"][data-part="tree"] {}
[data-scope="tree-view"][data-part="item"] {}
[data-scope="tree-view"][data-part="branch"] {}
[data-scope="tree-view"][data-part="branch-control"] {}
[data-scope="tree-view"][data-part="branch-content"] {}
[data-scope="tree-view"][data-part="branch-indicator"] {}

If you wish to use the default Corex styling, you can use the class tree-view on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/tree-view.css";

You can then use modifiers

<.tree_view class="tree-view tree-view--accent tree-view--lg" items={[]}>
  <:label>Label</:label>
</.tree_view>

Learn more about modifiers and Corex Design