Tree View

Hierarchical tree structure with expandable/collapsible nodes, selection tracking, keyboard navigation, and indentation guide lines.

Components

Tree View

navigation

interactive

<arc-tree-view>

Overview

TreeView renders a nested, collapsible tree structure ideal for file browsers, navigation menus, documentation outlines, and any hierarchical data. Nodes are defined declaratively using `<arc-tree-item>` child elements, which can be nested to arbitrary depth. Each item can have a label, an optional icon (emoji or text), and an `expanded` attribute to control its initial open state. Clicking a parent node both selects it and toggles its expanded state, revealing or hiding its children. Leaf nodes (those without children) are simply selected on click. The currently selected node receives an accent-primary highlight, and vertical guide lines appear alongside nested groups to visually communicate the tree's depth structure. Chevron indicators rotate smoothly when branches expand or collapse. TreeView supports full keyboard navigation following the WAI-ARIA tree pattern. ArrowDown/ArrowUp move focus between visible rows, ArrowRight expands a collapsed branch, ArrowLeft collapses an expanded one, and Enter or Space selects the focused node. The component fires `arc-select` with the item details and its full path array, and `arc-toggle` when a branch is expanded or collapsed.

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';

export default function Example() {
  return (
    <TreeView>
      <TreeItem label="src" icon="📁" expanded>
        <TreeItem label="index.ts" icon="📄" />
      </TreeItem>
      <TreeItem label="package.json" icon="📄" />
    </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 label="package.json" icon="📄" />
  </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 label="package.json" icon="📄" />
</TreeView>

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

@Component({
  imports: [TreeItem, TreeView],
  template: `
    <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>
  `,
})
export class MyComponent {}

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

export default function Example() {
  return (
    <TreeView>
      <TreeItem label="src" icon="📁" expanded>
        <TreeItem label="index.ts" icon="📄" />
      </TreeItem>
      <TreeItem label="package.json" icon="📄" />
    </TreeView>
  );
}

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

export default function Example() {
  return (
    <TreeView>
      <TreeItem label="src" icon="📁" expanded>
        <TreeItem label="index.ts" icon="📄" />
      </TreeItem>
      <TreeItem label="package.json" icon="📄" />
    </TreeView>
  );
}

Events

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.

items: Nested arc-tree-item children
hasChildren
label string ='': Item label text
icon string ='': Icon or emoji
expanded boolean =false: Expand child items

Tree View

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

Events

TreeItem

See Also

Docs

Project

Arclight