Tree View

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

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>

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"