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/tree-view'

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/tree-view'

export const Basic = () => {
  return (
    <TreeView.Root defaultSelectedValue={['1.0']}>
      <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>
  )
}

<script setup lang="ts">
import { TreeView } from '@ark-ui/vue/tree-view'
</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>

Using the Root Provider

The RootProvider component provides a context for the tree-view. It accepts the value of the useTree-view hook. You can leverage it to access the component state and methods from outside the tree-view.

import { TreeView, useTreeView } from '@ark-ui/react/tree-view'

export const RootProvider = () => {
  const treeView = useTreeView()

  return (
    <>
      <button onClick={() => treeView.collapse(['1.0'])}>Collapse 1.0</button>

      <TreeView.RootProvider value={treeView}>
        <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.RootProvider>
    </>
  )
}

import { TreeView, useTreeView } from '@ark-ui/solid/tree-view'

export const RootProvider = () => {
  const treeView = useTreeView({ defaultSelectedValue: ['1.0'] })

  return (
    <>
      <button onClick={() => treeView().collapse(['1.0'])}>Collapse 1.0</button>

      <TreeView.RootProvider value={treeView}>
        <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.RootProvider>
    </>
  )
}

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

const treeView = useTreeView()
</script>

<template>
  <button @click="treeView.collapse(['1.0'])">Collapse 1.0</button>

  <TreeView.RootProvider :value="treeView">
    <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.RootProvider>
</template>

If you're using the RootProvider component, you don't need to use the Root component.

API Reference

Accessibility

Complies with the Tree View WAI-ARIA design pattern.

Keyboard Support

Key	Description
`Tab`	Moves focus to the tree view, placing the first tree view item in focus.
`EnterSpace`	Selects the item or branch node
`ArrowDown`	Moves focus to the next node
`ArrowUp`	Moves focus to the previous node
`ArrowRight`	When focus is on a closed branch node, opens the branch. When focus is on an open branch node, moves focus to the first item node.
`ArrowLeft`	When focus is on an open branch node, closes the node. When focus is on an item or branch node, moves focus to its parent branch node.
`Home`	Moves focus to first node without opening or closing a node.
`End`	Moves focus to the last node that can be focused without expanding any nodes that are closed.
`a-zA-Z`	Focus moves to the next node with a name that starts with the typed character. The search logic ignores nodes that are descendants of closed branch.
`*`	Expands all sibling nodes that are at the same depth as the focused node.
`Shift + ArrowDown`	Moves focus to and toggles the selection state of the next node.
`Shift + ArrowUp`	Moves focus to and toggles the selection state of the previous node.
`Ctrl + A`	Selects all nodes in the tree. If all nodes are selected, unselects all nodes.