Tree

php artisan aura:add tree

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview
Basic Usage
Props
- Tree
- Tree Node
Examples
Slots
Accessibility

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

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

<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

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

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

<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

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

<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

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

<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

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

<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.

Overview#

Basic Usage#

Props#

Tree#

Tree Node#

Examples#

File Browser#

Category Tree#

Dynamic Tree from Database#

Organization Chart#

Collapsed by Default#

Slots#

Accessibility#