Tree View

A hierarchical disclosure tree for nested navigation and file structures.

File Browser

lib

sutra_ui

button.ex

calendar.ex

dialog.ex

priv

static

sutra_ui.css

README.md

    <.tree_view id="project-files-tree" label="Project files">
  <.tree_item label="lib" expanded>
    <.tree_item label="sutra_ui" expanded>
      <.tree_item label="button.ex" href="/docs/components/button" />
      <.tree_item label="calendar.ex" href="/docs/components/calendar" selected />
      <.tree_item label="dialog.ex" href="/docs/components/dialog" />
    </.tree_item>
  </.tree_item>
  <.tree_item label="priv" expanded>
    <.tree_item label="static">
      <.tree_item label="sutra_ui.css" href="/docs/theming" />
    </.tree_item>
  </.tree_item>
  <.tree_item label="README.md" href="/docs" />
</.tree_view>
  

Interactive Selection

Pass a select_event to tree_view and a value on each tree_item to make leaf nodes selectable. The event includes a node param — no phx-click needed on each item.

Settings Tree

Workspace

Selected: general

    <.tree_view id="settings-tree" label="Settings" select_event="select_node">
  <.tree_item label="Workspace" expanded value="ws">
    <.tree_item label="General" value="general" selected={@selected_node == "general"} />
    <.tree_item label="Members" value="members" selected={@selected_node == "members"} />
    <.tree_item label="Billing" value="billing" selected={@selected_node == "billing"} />
  </.tree_item>
  <.tree_item
    label="Security"
    value="security"
    selected={@selected_node == "security"}
    disabled
  />
</.tree_view>
<p class="text-sm text-muted-foreground">
  Selected: <strong class="text-foreground">{@selected_node}</strong>
</p>
  

Custom Triggers

Use the :trigger slot to replace the default label/icon with any content — icons, badges, or rich markup. The chevron and expand/collapse behavior stay intact.

Custom Triggers

src

test

    <.tree_view id="file-system-tree" label="File system">
  <.tree_item expanded>
    <:trigger>
      <.icon name="lucide-folder-open" class="size-4 text-muted-foreground" />
      <span class="font-medium">src</span>
    </:trigger>
    <.tree_item>
      <:trigger>
        <.icon name="lucide-file-code" class="size-4 text-muted-foreground" />
        <span>app.ex</span>
      </:trigger>
    </.tree_item>
    <.tree_item>
      <:trigger>
        <.icon name="lucide-file-code" class="size-4 text-muted-foreground" />
        <span>router.ex</span>
      </:trigger>
    </.tree_item>
  </.tree_item>
  <.tree_item>
    <:trigger>
      <.icon name="lucide-folder" class="size-4 text-muted-foreground" />
      <span>test</span>
    </:trigger>
    <.tree_item>
      <:trigger>
        <.icon name="lucide-file-code" class="size-4 text-muted-foreground" />
        <span>router_test.exs</span>
      </:trigger>
    </.tree_item>
  </.tree_item>
</.tree_view>
  

Keyboard Navigation

The tree implements the WAI-ARIA tree pattern with roving tabindex:

Up/Down — move between visible items
Right — expand a collapsed folder, or move to its first child
Left — collapse an expanded folder, or move to the parent
Home/End — jump to the first/last visible item
Enter/Space — activate the item (follow link or emit select event)