Tree View | Ark UI

Upcoming Component

Please note that this component will only be available in the next minor release.

No preview available for tree-view

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'

const Basic = () => {
  return (
    <TreeView.Root>
      <TreeView.Label>My Documents</TreeView.Label>
      <TreeView.Tree>
        <TreeView.Branch id="node_modules" depth={1}>
          <TreeView.BranchControl id="node_modules" depth={1}>
            <TreeView.BranchText id="node_modules" depth={1}>
              📂 node_modules
            </TreeView.BranchText>
          </TreeView.BranchControl>

          <TreeView.BranchContent id="node_modules" depth={1}>
            <TreeView.Item id="node_modules/zag-js" depth={2}>
              📄 zag-js
            </TreeView.Item>
            <TreeView.Item id="node_modules/pandacss" depth={2}>
              📄 panda
            </TreeView.Item>

            <TreeView.Branch id="node_modules/@types" depth={2}>
              <TreeView.BranchControl id="node_modules/@types" depth={2}>
                <TreeView.BranchText id="node_modules/@types" depth={2}>
                  📂 @types
                </TreeView.BranchText>
              </TreeView.BranchControl>

              <TreeView.BranchContent id="node_modules/@types" depth={2}>
                <TreeView.Item id="node_modules/@types/react" depth={3}>
                  📄 react
                </TreeView.Item>
                <TreeView.Item id="node_modules/@types/react-dom" depth={3}>
                  📄 react-dom
                </TreeView.Item>
              </TreeView.BranchContent>
            </TreeView.Branch>
          </TreeView.BranchContent>
        </TreeView.Branch>

        <TreeView.Branch id="src" depth={1}>
          <TreeView.BranchControl id="src" depth={1}>
            <TreeView.BranchText id="src" depth={1}>
              📂 src
            </TreeView.BranchText>
          </TreeView.BranchControl>

          <TreeView.BranchContent id="src" depth={1}>
            <TreeView.Item id="src/app.tsx" depth={2}>
              📄 app.tsx
            </TreeView.Item>
            <TreeView.Item id="src/index.ts" depth={2}>
              📄 index.ts
            </TreeView.Item>
          </TreeView.BranchContent>
        </TreeView.Branch>

        <TreeView.Item id="panda.config" depth={1}>
          📄 panda.config.ts
        </TreeView.Item>
        <TreeView.Item id="package.json" depth={1}>
          📄 package.json
        </TreeView.Item>
        <TreeView.Item id="renovate.json" depth={1}>
          📄 renovate.json
        </TreeView.Item>
        <TreeView.Item id="readme.md" depth={1}>
          📄 README.md
        </TreeView.Item>
      </TreeView.Tree>
    </TreeView.Root>
  )
}

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

const Basic = () => {
  return (
    <TreeView.Root>
      <TreeView.Label>My Documents</TreeView.Label>
      <TreeView.Tree>
        <TreeView.Branch id="node_modules" depth={1}>
          <TreeView.BranchControl id="node_modules" depth={1}>
            <TreeView.BranchText id="node_modules" depth={1}>
              📂 node_modules
            </TreeView.BranchText>
          </TreeView.BranchControl>

          <TreeView.BranchContent id="node_modules" depth={1}>
            <TreeView.Item id="node_modules/zag-js" depth={2}>
              📄 zag-js
            </TreeView.Item>
            <TreeView.Item id="node_modules/pandacss" depth={2}>
              📄 panda
            </TreeView.Item>

            <TreeView.Branch id="node_modules/@types" depth={2}>
              <TreeView.BranchControl id="node_modules/@types" depth={2}>
                <TreeView.BranchText id="node_modules/@types" depth={2}>
                  📂 @types
                </TreeView.BranchText>
              </TreeView.BranchControl>

              <TreeView.BranchContent id="node_modules/@types" depth={2}>
                <TreeView.Item id="node_modules/@types/react" depth={3}>
                  📄 react
                </TreeView.Item>
                <TreeView.Item id="node_modules/@types/react-dom" depth={3}>
                  📄 react-dom
                </TreeView.Item>
              </TreeView.BranchContent>
            </TreeView.Branch>
          </TreeView.BranchContent>
        </TreeView.Branch>

        <TreeView.Branch id="src" depth={1}>
          <TreeView.BranchControl id="src" depth={1}>
            <TreeView.BranchText id="src" depth={1}>
              📂 src
            </TreeView.BranchText>
          </TreeView.BranchControl>

          <TreeView.BranchContent id="src" depth={1}>
            <TreeView.Item id="src/app.tsx" depth={2}>
              📄 app.tsx
            </TreeView.Item>
            <TreeView.Item id="src/index.ts" depth={2}>
              📄 index.ts
            </TreeView.Item>
          </TreeView.BranchContent>
        </TreeView.Branch>

        <TreeView.Item id="panda.config" depth={1}>
          📄 panda.config.ts
        </TreeView.Item>
        <TreeView.Item id="package.json" depth={1}>
          📄 package.json
        </TreeView.Item>
        <TreeView.Item id="renovate.json" depth={1}>
          📄 renovate.json
        </TreeView.Item>
        <TreeView.Item id="readme.md" depth={1}>
          📄 README.md
        </TreeView.Item>
      </TreeView.Tree>
    </TreeView.Root>
  )
}

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

<template>
  <TreeView.Root>
    <TreeView.Label>My Documents</TreeView.Label>
    <TreeView.Tree>
      <TreeView.Branch id="node_modules" :depth="1">
        <TreeView.BranchControl id="node_modules" :depth="1">
          <TreeView.BranchText id="node_modules" :depth="1"> 📂 node_modules </TreeView.BranchText>
        </TreeView.BranchControl>

        <TreeView.BranchContent id="node_modules" :depth="1">
          <TreeView.Item id="node_modules/zag-js" :depth="2"> 📄 zag-js </TreeView.Item>
          <TreeView.Item id="node_modules/pandacss" :depth="2"> 📄 panda </TreeView.Item>

          <TreeView.Branch id="node_modules/@types" :depth="2">
            <TreeView.BranchControl id="node_modules/@types" :depth="2">
              <TreeView.BranchText id="node_modules/@types" :depth="2">
                📂 @types
              </TreeView.BranchText>
            </TreeView.BranchControl>

            <TreeView.BranchContent id="node_modules/@types" :depth="2">
              <TreeView.Item id="node_modules/@types/react" :depth="3"> 📄 react </TreeView.Item>
              <TreeView.Item id="node_modules/@types/react-dom" :depth="3">
                📄 react-dom
              </TreeView.Item>
            </TreeView.BranchContent>
          </TreeView.Branch>
        </TreeView.BranchContent>
      </TreeView.Branch>

      <TreeView.Branch id="src" :depth="1">
        <TreeView.BranchControl id="src" :depth="1">
          <TreeView.BranchText id="src" :depth="1"> 📂 src </TreeView.BranchText>
        </TreeView.BranchControl>

        <TreeView.BranchContent id="src" :depth="1">
          <TreeView.Item id="src/app.tsx" :depth="2"> 📄 app.tsx </TreeView.Item>
          <TreeView.Item id="src/index.ts" :depth="2"> 📄 index.ts </TreeView.Item>
        </TreeView.BranchContent>
      </TreeView.Branch>

      <TreeView.Item id="panda.config" :depth="1"> 📄 panda.config.ts </TreeView.Item>
      <TreeView.Item id="package.json" :depth="1"> 📄 package.json </TreeView.Item>
      <TreeView.Item id="renovate.json" :depth="1"> 📄 renovate.json </TreeView.Item>
      <TreeView.Item id="readme.md" :depth="1"> 📄 README.md </TreeView.Item>
    </TreeView.Tree>
  </TreeView.Root>
</template>

API Reference

Item

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

Root

PropTypeDefault


`asChild`	`boolean`
`defaultFocusedId`	`string`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`expandedIds`	`Set<string>`
`focusedId`	`string`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`onExpandedChange`	`(details: ExpandedChangeDetails) => void`
`onFocusChange`	`(details: FocusChangeDetails) => void`
`onSelectionChange`	`(details: SelectionChangeDetails) => void`
`openOnClick`	`boolean`	`true`
`selectedIds`	`Set<string>`
`selectionMode`	`'multiple' \| 'single'`	`"single"`

Tree

PropTypeDefault


`asChild`	`boolean`

Label

PropTypeDefault


`asChild`	`boolean`

Branch

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

ItemText

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

BranchText

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

BranchContent

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

BranchControl

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

BranchTrigger

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

BranchIndicator

PropTypeDefault


`depth`	`number`
`id`	`string`
`asChild`	`boolean`
`disabled`	`boolean`