Components / Data

Tree

A finite hierarchical collection with expansion, selection, roving focus, and typeahead.

Preview

Project files

Aurora web

Use cases

File explorer

Navigate folders and files with expansion and roving focus.

Category picker

Select one or several nodes within a finite hierarchy.

Usage example

Vue

<Tree v-model="selected" v-model:expanded="expanded" selection-mode="single" aria-label="Files">
  <TreeItem value="src">
    <TreeItemTrigger>src</TreeItemTrigger>
    <TreeGroup>
      <TreeItem value="app">
        <TreeItemTrigger>App.vue</TreeItemTrigger>
      </TreeItem>
    </TreeGroup>
  </TreeItem>
</Tree>

More examples

File explorer

Nest TreeGroup within an expandable item and bind both selection and expansion.

File explorer

<script setup lang="ts">
import { ref } from 'vue'
import Tree from './components/ui/tree/Tree.vue'
import TreeGroup from './components/ui/tree/TreeGroup.vue'
import TreeItem from './components/ui/tree/TreeItem.vue'
import TreeItemTrigger from './components/ui/tree/TreeItemTrigger.vue'
const selected = ref<string>()
const expanded = ref<string[]>(['src'])
</script>

<template>
  <Tree v-model="selected" v-model:expanded="expanded" aria-label="Project files">
    <TreeItem value="src"><TreeItemTrigger>src</TreeItemTrigger><TreeGroup>
      <TreeItem value="app"><TreeItemTrigger>App.vue</TreeItemTrigger></TreeItem>
      <TreeItem value="styles"><TreeItemTrigger>styles.css</TreeItemTrigger></TreeItem>
    </TreeGroup></TreeItem>
  </Tree>
</template>

Multiple categories

An array model collects selections from different branches.

Multiple categories

<script setup lang="ts">
import { ref } from 'vue'
import Tree from './components/ui/tree/Tree.vue'
import TreeGroup from './components/ui/tree/TreeGroup.vue'
import TreeItem from './components/ui/tree/TreeItem.vue'
import TreeItemTrigger from './components/ui/tree/TreeItemTrigger.vue'
const selected = ref<string[]>([])
</script>

<template>
  <Tree v-model="selected" selection-mode="multiple" aria-label="Topics">
    <TreeItem value="science"><TreeItemTrigger>Science</TreeItemTrigger><TreeGroup>
      <TreeItem value="physics"><TreeItemTrigger>Physics</TreeItemTrigger></TreeItem>
      <TreeItem value="biology"><TreeItemTrigger>Biology</TreeItemTrigger></TreeItem>
    </TreeGroup></TreeItem>
  </Tree>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Tree
Name	Type	Default or requirement
`v-model / defaultValue`	string \| string[]	undefined / []
`v-model:expanded / defaultExpanded`	string[]	[]
`selectionMode`	none \| single \| multiple	single
`dir`	ltr \| rtl	ltr

Tree renders all nested items in the DOM, so use VirtualList for very large flat collections. Arrow keys, Home and End, right-to-left navigation, and typeahead skip disabled nodes.

Implementation notes

Tree renders its finite nested collection in the DOM; for a very large flat collection, use VirtualList.
Keep values unique across every branch and use textValue when visible labels contain complex markup.

Accessibility and localization

Arrow keys, Home, End, and typeahead move focus; direction-aware arrows support RTL.