Tree View — ARC UI

Components

Tree View

navigation

interactive

<arc-tree-view>

Overview

Guidelines

When to use

Use `<arc-tree-item>` elements with descriptive `label` attributes for each node
Set `expanded` on top-level branches that should be visible by default for discoverability
Provide meaningful icons to help users scan the tree -- e.g. folder/file emojis for file browsers
Listen to `arc-select` to update the main content area when a tree node is chosen
Keep tree depth to 3-4 levels maximum for usability -- deeper nesting becomes hard to scan

When not to use

Do not use TreeView for flat lists -- use a simple list or navigation menu instead
Do not populate the tree with hundreds of top-level nodes without virtualisation or lazy loading
Do not use TreeView for selection of multiple items simultaneously -- it tracks a single selection
Do not rely solely on icons for meaning -- always include a text label on each tree item
Avoid extremely long label text -- it truncates with text-overflow ellipsis but is then unreadable

Features

Declarative tree structure using nested `<arc-tree-item>` elements with label, icon, and expanded props
Selection tracking with accent-primary highlight and `arc-select` event including the full item path
Animated chevron rotation when branches expand or collapse
Vertical indentation guide lines using `--border-subtle` for clear depth visualisation
Full keyboard navigation: ArrowDown/Up to traverse, ArrowRight/Left to expand/collapse, Enter/Space to select
Proper WAI-ARIA tree roles: `role="tree"`, `role="treeitem"`, `role="group"`, and `aria-expanded`
Branch toggle event (`arc-toggle`) with item details and expanded state for external state management
CSS parts for `tree`, `group`, `item`, and `row` enabling external style customisation

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-tree-view>
  <arc-tree-item label="src" icon="📁" expanded>
    <arc-tree-item label="index.ts" icon="📄"></arc-tree-item>
  </arc-tree-item>
  <arc-tree-item label="package.json" icon="📄"></arc-tree-item>
</arc-tree-view>

import { TreeItem, TreeView } from '@arclux/arc-ui-react';

<TreeView>
  <TreeItem label="src" icon="📁" expanded>
    <TreeItem label="index.ts" icon="📄"></TreeItem>
  </TreeItem>
  <TreeItem label="package.json" icon="📄"></TreeItem>
</TreeView>

<script setup>
import { TreeItem, TreeView } from '@arclux/arc-ui-vue';
</script>

<template>
  <TreeView>
    <TreeItem label="src" icon="📁" expanded>
      <TreeItem label="index.ts" icon="📄"></TreeItem>
    </TreeItem>
    <TreeItem label="package.json" icon="📄"></TreeItem>
  </TreeView>
</template>

<script>
  import { TreeItem, TreeView } from '@arclux/arc-ui-svelte';
</script>

<TreeView>
  <TreeItem label="src" icon="📁" expanded>
    <TreeItem label="index.ts" icon="📄"></TreeItem>
  </TreeItem>
  <TreeItem label="package.json" icon="📄"></TreeItem>
</TreeView>

import { Component } from '@angular/core';
import { TreeItem, TreeView } from '@arclux/arc-ui-angular';

@Component({
  imports: [TreeItem, TreeView],
  template: `
    <TreeView>
      <TreeItem label="src" icon="📁" expanded>
        <TreeItem label="index.ts" icon="📄"></TreeItem>
      </TreeItem>
      <TreeItem label="package.json" icon="📄"></TreeItem>
    </TreeView>
  `,
})
export class MyComponent {}

import { TreeItem, TreeView } from '@arclux/arc-ui-solid';

<TreeView>
  <TreeItem label="src" icon="📁" expanded>
    <TreeItem label="index.ts" icon="📄"></TreeItem>
  </TreeItem>
  <TreeItem label="package.json" icon="📄"></TreeItem>
</TreeView>

import { TreeItem, TreeView } from '@arclux/arc-ui-preact';

<TreeView>
  <TreeItem label="src" icon="📁" expanded>
    <TreeItem label="index.ts" icon="📄"></TreeItem>
  </TreeItem>
  <TreeItem label="package.json" icon="📄"></TreeItem>
</TreeView>

Events

Event	Description
`arc-toggle`	Fired when a tree node is expanded or collapsed
`arc-select`	Fired when a tree item is selected

TreeItem

<arc-tree-item>

Node within a TreeView. Can nest for sub-trees.

Prop	Type	Default	Description
`label`	`string`	—	Item label text
`icon`	`string`	—	Icon or emoji
`expanded`	`boolean`	`false`	Expand child items