Usage

TreeList is a data-driven tree. Each item has an id and a label. children nests the next level. isExpanded is the starting state. A click on a branch toggles it. A leaf with href is a link. A leaf with onClick is a button.

variant="lineGuides" draws the connectors. noGuides keeps the indent and drops the lines. density changes the row padding: compact 4px, balanced 8px, spacious 12px.

icon and endIcon are either an Icon glyph name or a CSS icon class that starts with i-. badge is a short trailing count. The start and end slots can replace those strings when the content is richer than an icon.

Keyboard behavior follows the tree pattern: up and down move, left and right collapse and expand (they swap in right-to-left layouts), Home and End jump, Enter and Space activate, and typing focuses a matching label.

<script setup lang="ts">
import { TreeList } from '@astryx-vue/core/TreeList'

const items = [
  {
    id: 'src',
    label: 'src',
    isExpanded: true,
    children: [{ id: 'app', label: 'App.tsx', onClick: () => {} }],
  },
]
</script>

<template>
  <TreeList :items="items" />
</template>

Anatomy

Element	Description
Tree list	Container that presents the hierarchical tree.
Header	Caller-provided content that visibly names the tree.
Item	Painted row for one node in the hierarchy.
Chevron	Expand and collapse control rendered for an Item with children.
Chevron glyph	Directional symbol rendered by Icon inside a Chevron.
Item label	Primary content that identifies an Item.
Item description	Secondary text rendered below an Item label.
Start content	Caller-provided content rendered before an Item label.
End content	Caller-provided content rendered after an Item label.
Guide	Connector line that shows parent-child relationships.

Best practices

Guidance	Practices
Do	Give every item a stable id. Focus and expansion are tracked by it.
Do	Use lineGuides when the nesting is deep enough that indent alone is hard to follow.
Do	Put counts in badge and a trailing affordance in endIcon, instead of appending them to the label.
Don't	Mix links and buttons in one row. A row is one action.
Don't	Expand every branch by default in a large tree. Start from the path the reader is on.

Examples

TreeList — File Tree With Icons

• src

File browser tree with folder and document icons distinguishing directories from files.

TreeList — Interactive Settings

• Settings
• Documentation

Settings tree with clickable items and a documentation link.

TreeList — Mailbox Tree

• Inbox3
  • 3
• 1

Email folder tree with unread badge counts.

TreeList — Navigation Tree

• Navigation

Navigation tree with a selected item for the current page.

Tree List — Variants

lineGuides (default)

• src
  • components

noGuides

• src
  • components

lineGuides draws connectors between a parent and its children. noGuides keeps the indent and drops the lines. Density is separate and only changes the row padding.