Tree ​

Displays hierarchical data in a collapsible tree structure. Makes it easy to navigate nested items and manage complex relationships.

Default ​

Guest
vue
<script setup lang="ts">
import { reactive } from 'vue'
import { Tree } from 'frappe-ui'

const state = reactive({
  showIndentationGuides: true,
  rowHeight: '25px',
  indentWidth: '15px',
  node: {
    name: 'guest',
    label: 'Guest',
    children: [
      {
        name: 'downloads',
        label: 'Downloads',
        children: [
          {
            name: 'download.zip',
            label: 'download.zip',
            children: [
              {
                name: 'image.png',
                label: 'image.png',
                children: [],
              },
            ],
          },
        ],
      },
      {
        name: 'documents',
        label: 'Documents',
        children: [
          {
            name: 'somefile.txt',
            label: 'somefile.txt',
            children: [],
          },
          {
            name: 'somefile.pdf',
            label: 'somefile.pdf',
            children: [],
          },
        ],
      },
    ],
  },
})
</script>

<template>
  <div>
    <Tree
      :options="{
        showIndentationGuides: state.showIndentationGuides,
        rowHeight: state.rowHeight,
        indentWidth: state.indentWidth,
      }"
      nodeKey="name"
      :node="state.node"
    />
  </div>
</template>

API Reference ​

Show types
typescript
export type TreeNode = {
  label: string
  children: TreeNode[]
  // added TreeNode[] due to enforcement that dynamic key types should accommodate all static key types
  [nodeKey: string]: string | number | TreeNode[]
}

export interface TreeProps {
  /**
   * Root tree node to render.
   * Can contain nested children to form the tree structure.
   */
  node: TreeNode

  /**
   * Unique key used to identify each node.
   * Usually an id-like property present on every node.
   */
  nodeKey: string

  /**
   * Optional configuration for tree layout and behavior.
   */
  options?: TreeOptions
}

export type TreeOptions = {
  /**
   * Height of each tree row (e.g. "32px").
   */
  rowHeight?: string

  /**
   * Horizontal indentation per tree level.
   */
  indentWidth?: string

  /**
   * Whether to show vertical indentation guide lines.
   */
  showIndentationGuides?: boolean

  /**
   * Whether tree nodes should be collapsed by default.
   */
  defaultCollapsed?: boolean
}
node*
TreeNode

Root tree node to render. Can contain nested children to form the tree structure.

nodeKey*
string

Unique key used to identify each node. Usually an id-like property present on every node.

options
= { rowHeight: "25px", indentWidth: "20px", showIndentationGuides: true, defaultCollapsed: true, }
TreeOptions

Optional configuration for tree layout and behavior.

node
—

Slot to fully override how a tree node renders

icon
—

Slot to override only the node expand/collapse icon

label
—

Slot to override only the node label/content

TooltipLegacy components