Tree View

A component that is used to show a tree hierarchy.

Item 1
- Item 1.1
- Item 1.2
  - Item 1.2.1
  - Item 1.2.2
Item 2
- Item 2.1
- Item 2.2
Item 3

Anatomy

To set up the tree view component correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the TreeView component in your project. Let's take a look at the most basic example:

import { TreeView } from '@ark-ui/react'

export const Basic = () => {
  return (
    <TreeView.Root>
      <TreeView.Label>Tree</TreeView.Label>
      <TreeView.Tree>
        <TreeView.Item value="1.0">
          <TreeView.ItemText>1.0</TreeView.ItemText>
        </TreeView.Item>
        <TreeView.Branch value="2.0">
          <TreeView.BranchControl>
            <TreeView.BranchIndicator>↕️</TreeView.BranchIndicator>
            <TreeView.BranchText>2.0</TreeView.BranchText>
          </TreeView.BranchControl>
          <TreeView.BranchContent>
            <TreeView.Item value="2.1">
              <TreeView.ItemText>2.2</TreeView.ItemText>
            </TreeView.Item>
            <TreeView.Item value="2.2">
              <TreeView.ItemText>2.2</TreeView.ItemText>
            </TreeView.Item>
          </TreeView.BranchContent>
        </TreeView.Branch>
      </TreeView.Tree>
    </TreeView.Root>
  )
}

import { TreeView } from '@ark-ui/solid'

export const Basic = () => {
  return (
    <TreeView.Root>
      <TreeView.Label>Tree</TreeView.Label>
      <TreeView.Tree>
        <TreeView.Item value="1.0">
          <TreeView.ItemText>1.0</TreeView.ItemText>
        </TreeView.Item>
        <TreeView.Branch value="2.0">
          <TreeView.BranchControl>
            <TreeView.BranchText>2.0</TreeView.BranchText>
          </TreeView.BranchControl>
          <TreeView.BranchContent>
            <TreeView.Item value="2.1">
              <TreeView.ItemText>2.2</TreeView.ItemText>
            </TreeView.Item>
            <TreeView.Item value="2.2">
              <TreeView.ItemText>2.2</TreeView.ItemText>
            </TreeView.Item>
          </TreeView.BranchContent>
        </TreeView.Branch>
      </TreeView.Tree>
    </TreeView.Root>
  )
}

<script setup lang="ts">
import { TreeView } from '@ark-ui/vue'
</script>

<template>
  <TreeView.Root>
    <TreeView.Label>Tree</TreeView.Label>
    <TreeView.Tree>
      <TreeView.Item value="1.0">
        <TreeView.ItemText>1.0</TreeView.ItemText>
      </TreeView.Item>
      <TreeView.Branch value="2.0">
        <TreeView.BranchControl>
          <TreeView.BranchTrigger>↕️</TreeView.BranchTrigger>
          <TreeView.BranchText>2.0</TreeView.BranchText>
          <TreeView.BranchIndicator>↕️</TreeView.BranchIndicator>
        </TreeView.BranchControl>
        <TreeView.BranchContent>
          <TreeView.Item value="2.1">
            <TreeView.ItemText>2.1</TreeView.ItemText>
          </TreeView.Item>
          <TreeView.Item value="2.2">
            <TreeView.ItemText>2.2</TreeView.ItemText>
          </TreeView.Item>
        </TreeView.BranchContent>
      </TreeView.Branch>
    </TreeView.Tree>
  </TreeView.Root>
</template>

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.
`defaultExpandedValue`		`string[]` The initial expanded items of the tree view. Use this when you do not need to control the state of the tree view.
`defaultSelectedValue`		`string[]` The initial selected items of the tree view. Use this when you do not need to control the state of the tree view.
`expandedValue`		`string[]` The id of the expanded nodes
`focusedValue`		`string` The id of the focused node
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; tree: string; label: string }>` The ids of the tree elements. Useful for composition.
`onExpandedChange`		`(details: ExpandedChangeDetails) => void` Called when the tree is opened or closed
`onFocusChange`		`(details: FocusChangeDetails) => void` Called when the focused node changes
`onSelectionChange`		`(details: SelectionChangeDetails) => void` Called when the selection changes
`openOnClick`	`true`	`boolean` Whether clicking on a branch should open it or not
`selectedValue`		`string[]` The id of the selected nodes
`selectionMode`	`'single'`	`'multiple' \| 'single'` Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
`typeahead`		`boolean` Whether the tree supports typeahead search

BranchContent

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

BranchControl

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

BranchIndicator

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Branch

Prop	Default	Type
`value`		`string` The id of the item or branch
`asChild`		`boolean` Render as a different element type.
`disabled`		`boolean` Whether the item or branch is disabled

BranchText

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

BranchTrigger

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

ItemIndicator

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Item

Prop	Default	Type
`value`		`string` The id of the item or branch
`asChild`		`boolean` Render as a different element type.
`disabled`		`boolean` Whether the item or branch is disabled

ItemText

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Label

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Tree

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.