Tree View

Browse an expandable hierarchy while keeping focus and selection distinct.

Usage

Expanded hierarchy

Browse a realistic project hierarchy while each folder keeps its own independent expansion state.

Atlas workspaceWorkspace

Applications2 apps

Dashboard2 files

Overview.vue4.2 KB

Settings.vue3.8 KB

Storefront18 files

Packages1 package

tokens.ts6.1 KB

README.md2.4 KB

<!-- Tree View / Expanded -->
<script setup lang="ts">
import { ref } from 'vue'
import { TreeViewDisclosure, TreeViewGroup, TreeViewItem, TreeViewRoot } from '@sectile/vue/tree-view'

const nodes = [
  { id: 'atlas', parentID: null },
  { id: 'apps', parentID: 'atlas' },
  { id: 'dashboard', parentID: 'apps' },
  { id: 'overview', parentID: 'dashboard' },
  { id: 'settings', parentID: 'dashboard' },
  { id: 'packages', parentID: 'atlas' },
  { id: 'tokens', parentID: 'packages' },
]
const expandedValues = ref(['atlas', 'apps', 'dashboard', 'packages'])
</script>

<template>
  <TreeViewRoot
    :nodes="nodes"

    v-model:expanded-values="expandedValues"
    :default-value="['settings']"
    label="Atlas project files"

  >
    <TreeViewItem value="atlas"><TreeViewDisclosure for="atlas" as="button">Toggle</TreeViewDisclosure>Atlas workspace</TreeViewItem>
    <TreeViewGroup for="atlas">
      <TreeViewItem value="apps"><TreeViewDisclosure for="apps" as="button">Toggle</TreeViewDisclosure>Applications</TreeViewItem>
      <TreeViewGroup for="apps">
        <TreeViewItem value="dashboard"><TreeViewDisclosure for="dashboard" as="button">Toggle</TreeViewDisclosure>Dashboard</TreeViewItem>
        <TreeViewGroup for="dashboard">
          <TreeViewItem value="overview">Overview.vue</TreeViewItem>
          <TreeViewItem value="settings">Settings.vue</TreeViewItem>
        </TreeViewGroup>
      </TreeViewGroup>
      <TreeViewItem value="packages"><TreeViewDisclosure for="packages" as="button">Toggle</TreeViewDisclosure>Packages</TreeViewItem>
      <TreeViewGroup for="packages"><TreeViewItem value="tokens">tokens.ts</TreeViewItem></TreeViewGroup>
    </TreeViewGroup>
  </TreeViewRoot>
</template>

Collapsed

Start with descendants hidden, then reveal them without changing the source data.

Atlas workspaceWorkspace

Applications2 apps

Dashboard2 files

Overview.vue4.2 KB

Settings.vue3.8 KB

Storefront18 files

Packages1 package

tokens.ts6.1 KB

README.md2.4 KB

<!-- Tree View / Collapsed -->
<script setup lang="ts">
import { ref } from 'vue'
import { TreeViewDisclosure, TreeViewGroup, TreeViewItem, TreeViewRoot } from '@sectile/vue/tree-view'

const nodes = [
  { id: 'atlas', parentID: null },
  { id: 'apps', parentID: 'atlas' },
  { id: 'dashboard', parentID: 'apps' },
  { id: 'overview', parentID: 'dashboard' },
  { id: 'settings', parentID: 'dashboard' },
  { id: 'packages', parentID: 'atlas' },
  { id: 'tokens', parentID: 'packages' },
]
const expandedValues = ref(['atlas', 'apps', 'dashboard', 'packages'])
</script>

<template>
  <TreeViewRoot
    :nodes="nodes"

    v-model:expanded-values="expandedValues"
    :default-value="['settings']"
    label="Atlas project files"

  >
    <TreeViewItem value="atlas"><TreeViewDisclosure for="atlas" as="button">Toggle</TreeViewDisclosure>Atlas workspace</TreeViewItem>
    <TreeViewGroup for="atlas">
      <TreeViewItem value="apps"><TreeViewDisclosure for="apps" as="button">Toggle</TreeViewDisclosure>Applications</TreeViewItem>
      <TreeViewGroup for="apps">
        <TreeViewItem value="dashboard"><TreeViewDisclosure for="dashboard" as="button">Toggle</TreeViewDisclosure>Dashboard</TreeViewItem>
        <TreeViewGroup for="dashboard">
          <TreeViewItem value="overview">Overview.vue</TreeViewItem>
          <TreeViewItem value="settings">Settings.vue</TreeViewItem>
        </TreeViewGroup>
      </TreeViewGroup>
      <TreeViewItem value="packages"><TreeViewDisclosure for="packages" as="button">Toggle</TreeViewDisclosure>Packages</TreeViewItem>
      <TreeViewGroup for="packages"><TreeViewItem value="tokens">tokens.ts</TreeViewItem></TreeViewGroup>
    </TreeViewGroup>
  </TreeViewRoot>
</template>

Multiple selection

Choose several files for review without confusing selection with folder expansion.

3 files selectedSpace toggles selection

Atlas workspaceWorkspace

Applications2 apps

Dashboard2 files

Overview.vue4.2 KB

Settings.vue3.8 KB

Storefront18 files

Packages1 package

tokens.ts6.1 KB

README.md2.4 KB

<!-- Tree View / Multiple -->
<script setup lang="ts">
import { ref } from 'vue'
import { TreeViewDisclosure, TreeViewGroup, TreeViewItem, TreeViewRoot } from '@sectile/vue/tree-view'

const nodes = [
  { id: 'atlas', parentID: null },
  { id: 'apps', parentID: 'atlas' },
  { id: 'dashboard', parentID: 'apps' },
  { id: 'overview', parentID: 'dashboard' },
  { id: 'settings', parentID: 'dashboard' },
  { id: 'packages', parentID: 'atlas' },
  { id: 'tokens', parentID: 'packages' },
]
const expandedValues = ref(['atlas', 'apps', 'dashboard', 'packages'])
</script>

<template>
  <TreeViewRoot
    :nodes="nodes"
    selection-mode="multiple"

    v-model:expanded-values="expandedValues"
    :default-value="['overview', 'settings', 'tokens']"
    label="Files selected for review"
    v-slot="{ value }"

  >
    <output>{{ value.length }} files selected</output>
    <TreeViewItem value="atlas"><TreeViewDisclosure for="atlas" as="button">Toggle</TreeViewDisclosure>Atlas workspace</TreeViewItem>
    <TreeViewGroup for="atlas">
      <TreeViewItem value="apps"><TreeViewDisclosure for="apps" as="button">Toggle</TreeViewDisclosure>Applications</TreeViewItem>
      <TreeViewGroup for="apps">
        <TreeViewItem value="dashboard"><TreeViewDisclosure for="dashboard" as="button">Toggle</TreeViewDisclosure>Dashboard</TreeViewItem>
        <TreeViewGroup for="dashboard">
          <TreeViewItem value="overview">Overview.vue</TreeViewItem>
          <TreeViewItem value="settings">Settings.vue</TreeViewItem>
        </TreeViewGroup>
      </TreeViewGroup>
      <TreeViewItem value="packages"><TreeViewDisclosure for="packages" as="button">Toggle</TreeViewDisclosure>Packages</TreeViewItem>
      <TreeViewGroup for="packages"><TreeViewItem value="tokens">tokens.ts</TreeViewItem></TreeViewGroup>
    </TreeViewGroup>
  </TreeViewRoot>
</template>

Unavailable

Keep an unavailable tree item visible while excluding it from activation.

Atlas workspaceWorkspace

Applications2 apps

Dashboard2 files

Overview.vue4.2 KB

Settings.vue3.8 KB

Storefront18 files

Packages1 package

tokens.ts6.1 KB

README.md2.4 KB

<!-- Tree View / Unavailable -->
<script setup lang="ts">
import { ref } from 'vue'
import { TreeViewDisclosure, TreeViewGroup, TreeViewItem, TreeViewRoot } from '@sectile/vue/tree-view'

const nodes = [
  { id: 'atlas', parentID: null },
  { id: 'apps', parentID: 'atlas' },
  { id: 'dashboard', parentID: 'apps' },
  { id: 'overview', parentID: 'dashboard' },
  { id: 'settings', parentID: 'dashboard' },
  { id: 'packages', parentID: 'atlas' },
  { id: 'tokens', parentID: 'packages' },
]
const expandedValues = ref(['atlas', 'apps', 'dashboard', 'packages'])
</script>

<template>
  <TreeViewRoot
    :nodes="nodes"

    v-model:expanded-values="expandedValues"
    :default-value="['settings']"
    label="Atlas project files"

  >
    <TreeViewItem value="atlas"><TreeViewDisclosure for="atlas" as="button">Toggle</TreeViewDisclosure>Atlas workspace</TreeViewItem>
    <TreeViewGroup for="atlas">
      <TreeViewItem value="apps"><TreeViewDisclosure for="apps" as="button">Toggle</TreeViewDisclosure>Applications</TreeViewItem>
      <TreeViewGroup for="apps">
        <TreeViewItem value="dashboard"><TreeViewDisclosure for="dashboard" as="button">Toggle</TreeViewDisclosure>Dashboard</TreeViewItem>
        <TreeViewGroup for="dashboard">
          <TreeViewItem value="overview">Overview.vue</TreeViewItem>
          <TreeViewItem value="settings">Settings.vue</TreeViewItem>
        </TreeViewGroup>
      </TreeViewGroup>
      <TreeViewItem value="packages"><TreeViewDisclosure for="packages" as="button">Toggle</TreeViewDisclosure>Packages</TreeViewItem>
      <TreeViewGroup for="packages"><TreeViewItem value="tokens">tokens.ts</TreeViewItem></TreeViewGroup>
    </TreeViewGroup>
  </TreeViewRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Atlas workspaceWorkspace

Applications2 apps

Dashboard2 files

Overview.vue4.2 KB

Settings.vue3.8 KB

Storefront18 files

Packages1 package

tokens.ts6.1 KB

README.md2.4 KB

<!-- Tree View / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TreeViewDisclosure, TreeViewGroup, TreeViewItem, TreeViewRoot } from '@sectile/vue/tree-view'

const nodes = [
  { id: 'atlas', parentID: null },
  { id: 'apps', parentID: 'atlas' },
  { id: 'dashboard', parentID: 'apps' },
  { id: 'overview', parentID: 'dashboard' },
  { id: 'settings', parentID: 'dashboard' },
  { id: 'packages', parentID: 'atlas' },
  { id: 'tokens', parentID: 'packages' },
]
const expandedValues = ref(['atlas', 'apps', 'dashboard', 'packages'])
</script>

<template>
  <TreeViewRoot
    :nodes="nodes"

    v-model:expanded-values="expandedValues"
    :default-value="['settings']"
    label="Atlas project files"

  >
    <TreeViewItem value="atlas"><TreeViewDisclosure for="atlas" as="button">Toggle</TreeViewDisclosure>Atlas workspace</TreeViewItem>
    <TreeViewGroup for="atlas">
      <TreeViewItem value="apps"><TreeViewDisclosure for="apps" as="button">Toggle</TreeViewDisclosure>Applications</TreeViewItem>
      <TreeViewGroup for="apps">
        <TreeViewItem value="dashboard"><TreeViewDisclosure for="dashboard" as="button">Toggle</TreeViewDisclosure>Dashboard</TreeViewItem>
        <TreeViewGroup for="dashboard">
          <TreeViewItem value="overview">Overview.vue</TreeViewItem>
          <TreeViewItem value="settings">Settings.vue</TreeViewItem>
        </TreeViewGroup>
      </TreeViewGroup>
      <TreeViewItem value="packages"><TreeViewDisclosure for="packages" as="button">Toggle</TreeViewDisclosure>Packages</TreeViewItem>
      <TreeViewGroup for="packages"><TreeViewItem value="tokens">tokens.ts</TreeViewItem></TreeViewGroup>
    </TreeViewGroup>
  </TreeViewRoot>
</template>

API

Vue package: @sectile/vue/tree-view

Components

TreeViewRoot
TreeViewGroup
TreeViewItem
TreeViewDisclosure

Props

`TreeViewRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultExpandedValues: Typereadonly string[]Default[]
Initially expanded values for uncontrolled state.
defaultHighlightedValue: Typestring | nullDefaultnull
Initially highlighted value for uncontrolled state.
defaultValue: Typereadonly string[]Default[]
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
disabledItems: Typereadonly string[]Default[]
Item values excluded from focus and selection.
expandedValues: Typereadonly string[]Defaultundefined
Controlled values whose descendants are visible.
highlightedValue: Typestring | nullDefaultundefined
Value currently highlighted for keyboard interaction.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: Typereadonly string[]Defaultundefined
Current value when state is controlled by the parent.
nodes: Typereadonly TreeNodeInput<string>[]DefaultRequired
Flat hierarchy used to build the tree.
policies: TypeTreeViewPolicies<string>Defaultundefined
Behavior policies that customize validation, movement, or selection.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
selectionMode: TypeTreeViewSelectionModeDefault'single'
Whether selection contains one value or multiple values.

`TreeViewPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

`TreeViewGroupProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
for: TypestringDefaultRequired
Value or ID of the related part targeted by this component.

Slots

`TreeViewRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
expandedValues: Typereadonly string[]
Values whose descendants are visible.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typereadonly string[]
Current value exposed by this contract.

`TreeViewItemSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
expanded: Typeboolean
Whether descendants are visible.
expandedValues: Typereadonly string[]
Values whose descendants are visible.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
readonly: Typeboolean
Whether the value can be inspected but not changed.
selected: Typeboolean
Whether this item is selected.
selectedValues: Typereadonly string[]
Current selected values.
value: Typestring
Current value exposed by this contract.

Events

`TreeViewRoot`

update:expandedValues: Payloadreadonly string[]
Emitted when the requested expanded values change.
update:highlightedValue: Payloadstring | null
Emitted when the requested highlighted value changes.
update:modelValue: Payloadreadonly string[]
Emitted when the component requests a new controlled value.

Other types

`TreeViewPolicies`

Name	Type	Required
`eligible`	`(id: ID) => boolean`	—

`TreeViewEligiblePredicate`

type TreeViewEligiblePredicate<ID extends string = string> = NonNullable<TreeViewPolicies<ID>['eligible']>

`TreeViewValueChangeHandler`

type TreeViewValueChangeHandler = (value: readonly string[]) => void

`TreeViewExpandedValuesChangeHandler`

type TreeViewExpandedValuesChangeHandler = (value: readonly string[]) => void

`TreeViewHighlightedValueChangeHandler`

type TreeViewHighlightedValueChangeHandler = (value: string | null) => void

`TreeNodeInput`

Name	Type	Required
`id`	`ID`	Yes
`parentID`	`ID \| null`	Yes

`TreeViewSelectionMode`

type TreeViewSelectionMode = 'single' | 'multiple'

Parts

Shared scope: [data-scope="tree-view"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`group`	`[data-part="group"]`	Groups related child items.	—
`item`	`[data-part="item"]`	Represents one selectable or actionable item.	—
`disclosure`	`[data-part="disclosure"]`	Expands or collapses child content.	—

Keyboard interaction

Key	Behavior
`Arrow Up` / `Arrow Down`	Move between visible tree items.
`Arrow Right`	Expand a branch or move into its first child.
`Arrow Left`	Collapse a branch or move to its parent.
`Enter` / `Space`	Select or activate the current item.

Accessibility

Tree items expose level, expansion, selection, and disabled state with one roving tab stop.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Tree View ​

Usage ​

Expanded hierarchy ​

Collapsed ​

Multiple selection ​

Unavailable ​

Controlled ​

API ​

Props ​

TreeViewRootProps ​

TreeViewPartProps ​

TreeViewGroupProps ​

Slots ​

TreeViewRootSlotProps ​

TreeViewItemSlotProps ​

Events ​

TreeViewRoot ​

Other types ​

TreeViewPolicies ​

TreeViewEligiblePredicate ​

TreeViewValueChangeHandler ​

TreeViewExpandedValuesChangeHandler ​

TreeViewHighlightedValueChangeHandler ​

TreeNodeInput ​

TreeViewSelectionMode ​

Parts ​

Keyboard interaction ​

Accessibility ​

Tree View

Usage

Expanded hierarchy

Collapsed

Multiple selection

Unavailable

Controlled

API

Props

`TreeViewRootProps`

`TreeViewPartProps`

`TreeViewGroupProps`

Slots

`TreeViewRootSlotProps`

`TreeViewItemSlotProps`

Events

`TreeViewRoot`

Other types

`TreeViewPolicies`

`TreeViewEligiblePredicate`

`TreeViewValueChangeHandler`

`TreeViewExpandedValuesChangeHandler`

`TreeViewHighlightedValueChangeHandler`

`TreeNodeInput`

`TreeViewSelectionMode`

Parts

Keyboard interaction

Accessibility