Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Tree component renders hierarchical data as an expandable tree structure. Each node can have child nodes, custom icons, and optional selection behavior. It is useful for file browsers, category hierarchies, organizational charts, and any nested data display. Built with Alpine.js for smooth expand/collapse animations.

Basic Usage

  • Documents
    • report.pdf
    • invoice.xlsx
  • Images
    • photo.jpg 
<x-aura::tree>
    <x-aura::tree.node label="Documents" icon="folder">
        <x-aura::tree.node label="report.pdf" icon="file" />
        <x-aura::tree.node label="invoice.xlsx" icon="file" />
    </x-aura::tree.node>
    <x-aura::tree.node label="Images" icon="folder">
        <x-aura::tree.node label="photo.jpg" icon="image" />
    </x-aura::tree.node>
</x-aura::tree>

Props

Tree

Prop Type Default Description
selectable bool false Enable clicking nodes to select them.
expandAll bool false Expand all nodes by default.

Tree Node

Prop Type Default Description
label string '' Node display text.
icon string|null null Heroicon name for the node icon.
children array [] Array of child node data for programmatic rendering (alternative to slot-based children).

Examples

File Browser

  • src
    • app
      • Models
        • User.php
        • Post.php
        • Comment.php
      • Http
        • Controllers
          • UserController.php
          • PostController.php
    • resources
      • views
        • welcome.blade.php
  • composer.json
  • README.md 
<x-aura::tree :selectable="true">
    <x-aura::tree.node label="src" icon="folder">
        <x-aura::tree.node label="app" icon="folder">
            <x-aura::tree.node label="Models" icon="folder">
                <x-aura::tree.node label="User.php" icon="file-text" />
                <x-aura::tree.node label="Post.php" icon="file-text" />
                <x-aura::tree.node label="Comment.php" icon="file-text" />
            </x-aura::tree.node>
            <x-aura::tree.node label="Http" icon="folder">
                <x-aura::tree.node label="Controllers" icon="folder">
                    <x-aura::tree.node label="UserController.php" icon="file-text" />
                    <x-aura::tree.node label="PostController.php" icon="file-text" />
                </x-aura::tree.node>
            </x-aura::tree.node>
        </x-aura::tree.node>
        <x-aura::tree.node label="resources" icon="folder">
            <x-aura::tree.node label="views" icon="folder">
                <x-aura::tree.node label="welcome.blade.php" icon="file-text" />
            </x-aura::tree.node>
        </x-aura::tree.node>
    </x-aura::tree.node>
    <x-aura::tree.node label="composer.json" icon="file" />
    <x-aura::tree.node label="README.md" icon="file" />
</x-aura::tree>

Category Tree

  • Electronics
    • Computers
      • Laptops
      • Desktops
      • Monitors
    • Phones
      • Smartphones
      • Accessories
  • Clothing
    • Men
    • Women
    • Kids 
<x-aura::tree :selectable="true" :expandAll="true">
    <x-aura::tree.node label="Electronics" icon="monitor">
        <x-aura::tree.node label="Computers" icon="cpu">
            <x-aura::tree.node label="Laptops" />
            <x-aura::tree.node label="Desktops" />
            <x-aura::tree.node label="Monitors" />
        </x-aura::tree.node>
        <x-aura::tree.node label="Phones" icon="smartphone">
            <x-aura::tree.node label="Smartphones" />
            <x-aura::tree.node label="Accessories" />
        </x-aura::tree.node>
    </x-aura::tree.node>
    <x-aura::tree.node label="Clothing" icon="shopping-cart">
        <x-aura::tree.node label="Men" />
        <x-aura::tree.node label="Women" />
        <x-aura::tree.node label="Kids" />
    </x-aura::tree.node>
</x-aura::tree>

Dynamic Tree from Database

<!-- Blade view -->
<x-aura::tree
    :selectable="true"
    x-on:tree-node-selected="$wire.selectCategory($event.detail.nodeId)"
>
    @foreach($categories as $category)
        <x-aura::tree.node :label="$category->name" icon="folder">
            @foreach($category->children as $child)
                <x-aura::tree.node :label="$child->name" icon="tag" />
            @endforeach
        </x-aura::tree.node>
    @endforeach
</x-aura::tree>

// Livewire component
class CategoryPicker extends Component
{
    public ?int $selectedCategoryId = null;

    public function selectCategory(int $nodeId): void
    {
        $this->selectedCategoryId = $nodeId;
        $this->dispatch('category-selected', categoryId: $nodeId);
    }

    public function render()
    {
        return view('livewire.category-picker', [
            'categories' => Category::with('children')->whereNull('parent_id')->get(),
        ]);
    }
}

Organization Chart

  • CEO - Maria Rossi
    • CTO - Marco Bianchi
      • Lead Dev - Anna Verdi
      • DevOps - Luca Neri
    • CFO - Paolo Gialli
      • Accountant - Sara Blu
    • CMO - Elena Viola
      • Designer - Tom Gray
      • Content - Lisa Rosa 
<x-aura::tree :expandAll="true">
    <x-aura::tree.node label="CEO - Maria Rossi" icon="user">
        <x-aura::tree.node label="CTO - Marco Bianchi" icon="user">
            <x-aura::tree.node label="Lead Dev - Anna Verdi" icon="user" />
            <x-aura::tree.node label="DevOps - Luca Neri" icon="user" />
        </x-aura::tree.node>
        <x-aura::tree.node label="CFO - Paolo Gialli" icon="user">
            <x-aura::tree.node label="Accountant - Sara Blu" icon="user" />
        </x-aura::tree.node>
        <x-aura::tree.node label="CMO - Elena Viola" icon="user">
            <x-aura::tree.node label="Designer - Tom Gray" icon="user" />
            <x-aura::tree.node label="Content - Lisa Rosa" icon="user" />
        </x-aura::tree.node>
    </x-aura::tree.node>
</x-aura::tree>

Collapsed by Default

  • Chapter 1
    • Section 1.1
    • Section 1.2
  • Chapter 2
    • Section 2.1
    • Section 2.2 
<x-aura::tree :expandAll="false">
    <x-aura::tree.node label="Chapter 1" icon="book">
        <x-aura::tree.node label="Section 1.1" />
        <x-aura::tree.node label="Section 1.2" />
    </x-aura::tree.node>
    <x-aura::tree.node label="Chapter 2" icon="book">
        <x-aura::tree.node label="Section 2.1" />
        <x-aura::tree.node label="Section 2.2" />
    </x-aura::tree.node>
</x-aura::tree>

Slots

Slot Component Description
default tree Contains top-level tree.node children.
default tree.node Contains nested tree.node children to build the hierarchy.

Accessibility

  • The tree uses role="tree" on the root element.
  • Each node uses role="treeitem".
  • Nodes with children have aria-expanded reflecting their open/closed state.
  • aria-selected indicates the selected node when selectable is enabled.
  • aria-level indicates the depth of each node in the hierarchy.
  • Arrow Up/Down navigate between visible nodes.
  • Arrow Right expands a collapsed node or moves to the first child.
  • Arrow Left collapses an expanded node or moves to the parent.
  • Home moves to the first node; End moves to the last visible node.
  • Enter or Space selects a node (when selectable is enabled) or toggles expand/collapse.
  • Node icons include aria-hidden="true" as they are decorative.