Tree View

Represents a hierarchical list. Any vwc-tree-item in the hierarchy may have child vwc-tree-items, and vwc-tree-items that have children may be expanded or collapsed to show or hide the children. Click here to learn more about TreeView’s Keyboard Interaction and Accessibility.

Slots

Default

Read more about vwc-tree-item.

<script setup lang="ts">
import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTreeView>
    <VTreeItem text="Tree Item 1" />
    <VTreeItem text="Tree Item 2" />
  </VTreeView>
</template>

Use Cases

Nested Tree

Read more about vwc-tree-item.

<script setup lang="ts">
import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTreeView>
    <VTreeItem text="Tree Item 1">
      <template #item><VTreeItem text="Tree Item 1 - 1" /></template>
    </VTreeItem>
    <VTreeItem text="Tree Item 2" />
  </VTreeView>
</template>

<vwc-tree-view>
  <vwc-tree-item text="Tree Item 1">
    <vwc-tree-item slot="item" text="Tree Item 1 - 1"></vwc-tree-item>
  </vwc-tree-item>
  <vwc-tree-item text="Tree Item 2"></vwc-tree-item>
</vwc-tree-view>