v1.1.8

Tree View

A hierarchical tree structure for displaying nested data like file systems or navigation menus.

Interactive Requires: uicraft.js JS init: automatic

File Explorer

Classic file tree with folders and files, expandable/collapsible branches.

html
Button.astro Card.astro Dialog.astro
main.scss
package.json tsconfig.json favicon.svg 
<div class="uc-tree">
  <div class="uc-tree-item" data-tree-branch>
    <button class="uc-tree-toggle">
      <svg class="uc-w-4 uc-h-4 uc-tree-chevron"><!-- ChevronRight --></svg>
      <svg class="uc-w-4 uc-h-4"><!-- Folder --></svg>
      <span>src</span>
    </button>
    <div class="uc-tree-children">
      <a class="uc-tree-leaf"><!-- File icon --> index.ts</a>
      <a class="uc-tree-leaf"><!-- File icon --> utils.ts</a>
    </div>
  </div>
</div>

Navigation Tree

Tree structure used as a navigation menu with icons.

html 
<nav class="uc-tree">
  <div data-tree-branch>
    <button class="uc-tree-toggle">
      <svg><!-- Settings --></svg> Settings
    </button>
    <div class="uc-tree-children">
      <a class="uc-tree-leaf">Profile</a>
      <a class="uc-tree-leaf">Account</a>
    </div>
  </div>
</nav>

Compact

Minimal tree without icons for simple hierarchies.

html
Getting Started
Button Input Card 
<div class="uc-tree">
  <div data-tree-branch>
    <button class="uc-tree-toggle">src/</button>
    <div class="uc-tree-children">
      <div data-tree-branch>
        <button class="uc-tree-toggle">components/</button>
        <div class="uc-tree-children">
          <a class="uc-tree-leaf">Button.tsx</a>
        </div>
      </div>
    </div>
  </div>
</div>

Anatomy

HTML structure of the Tree View component.

div[data-tree]                             ← Tree root
└── div[data-tree-branch]                  ← Expandable branch
    ├── button.uc-tree-toggle              ← Toggle button
    │   ├── svg.uc-tree-chevron            ← Rotating chevron
    │   ├── svg (icon)                     ← Node icon
    │   └── span                           ← Node label
    └── div.uc-tree-children               ← Children wrapper
        ├── div[data-tree-branch]          ← Nested branch (recursive)
        └── a.uc-tree-leaf                 ← Leaf node (no children)

API Reference

All CSS classes available for the Tree View component.

Class Type Description
data-tree Base Root container attribute for tree view initialization
data-tree-branch Base Branch node that can expand/collapse
uc-tree-toggle Base Toggle button for expanding/collapsing a branch
uc-tree-children Base Container for nested items with animated expand/collapse
uc-tree-leaf Base Leaf node (non-expandable item)
uc-tree-chevron Style Rotation indicator that rotates 90deg when branch is open
uc-tree-active State Highlighted state for the currently selected leaf
open State Class on data-tree-branch to expand its children
uc-rounded-2xl uc-border uc-border-border-default Style Card container for the tree
uc-text-accents-blue Color Folder icon and active item color
uc-text-accents-green Color Code file icon color

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="tree" on container, role="treeitem" on each node
Nesting Nested groups use role="group" inside parent treeitem
Keyboard Arrow keys navigate, Enter/Space select, Left/Right expand/collapse
Expanded Expandable nodes use aria-expanded="true/false"
Selected Selected items use aria-selected="true"
Built with:
Button Icons