Tree

<NaviusTree TValue="string" @bind-SelectedValue="_selected"
            DefaultExpandedValues="_expanded" Label="Project files">
    <NaviusTreeItem Value="@("src")">
        <NaviusTreeItemContent class="flex items-center gap-1 rounded px-2 py-1
                                       data-[selected]:bg-primary data-[selected]:text-primary-foreground">
            <NaviusTreeItemIndicator class="data-[state=expanded]:rotate-90 data-[leaf]:opacity-0"><ChevronIcon /></NaviusTreeItemIndicator>
            <NaviusTreeItemTrigger class="flex-1">src</NaviusTreeItemTrigger>
        </NaviusTreeItemContent>
        <NaviusTreeGroup class="pl-4">
            <NaviusTreeItem Value="@("index.ts")">
                <NaviusTreeItemContent> ... index.ts ... </NaviusTreeItemContent>
            </NaviusTreeItem>
        </NaviusTreeGroup>
    </NaviusTreeItem>
</NaviusTree>

Features

• Generic over the node value type; a non-generic context is cascaded so the parts stay simple. Every treeitem auto-wires aria-level / aria-setsize / aria-posinset from the composition.
• Selection is none / single / multiple, controlled via @bind-SelectedValue(s) or uncontrolled; expansion via @bind-ExpandedValues.
• FocusMode is roving (default) or activedescendant (for virtualized trees); a single keyboard handler on the tree serves both.
• Two composition modes: author the parts as children, or pass Items (a hierarchy of TreeNode<TValue>) + an ItemTemplate and let the tree walk it.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add tree

Anatomy

A treeitem's row is a Content holding an Indicator + a Trigger; a child Group makes the node a parent and holds its subtree.

@using Navius.Primitives.Components.Tree

<NaviusTree TValue="string" Label="Files">
    <NaviusTreeItem Value="@("node")">
        <NaviusTreeItemContent>
            <NaviusTreeItemIndicator />
            <NaviusTreeItemTrigger>node</NaviusTreeItemTrigger>
        </NaviusTreeItemContent>
        <NaviusTreeGroup>
            @* nested NaviusTreeItem children *@
        </NaviusTreeGroup>
    </NaviusTreeItem>
</NaviusTree>

API Reference

Root

NaviusTree<TValue>. Owns selection, expansion, focus and the keyboard model. Renders a div with role=tree. SelectedValue(s) and ExpandedValues are two-way bindable.

Data attributes

Item

NaviusTreeItem. The focusable node (role=treeitem); emits aria-level / setsize / posinset, aria-expanded (parents only) and aria-selected. Renders a div.

Data attributes

ItemContent

NaviusTreeItemContent. The presentational label-row wrapper (indicator + trigger + adornments). Renders a div.

ItemTrigger

NaviusTreeItemTrigger. The expand/collapse + select click target; a presentational span (no second tab stop). Renders a span.

Data attributes

ItemIndicator

NaviusTreeItemIndicator. The expand/collapse chevron (aria-hidden). Renders a span carrying data-state so a chevron can rotate.

Data attributes

Group

NaviusTreeGroup. The child container (role=group); its presence marks the parent expandable. Lazy-mount or KeepMounted. Renders a div.

Data attributes

Data-driven mode: Items is an IReadOnlyList<TreeNode<TValue>> where TreeNode has Value, Label, Children and Disabled; the ItemTemplate renders each node's row and the tree wires the group + recursion.

Accessibility

Adheres to the tree view pattern: role="tree" with a labelled name, treeitems with level / setsize / posinset, aria-expanded on parents only (never leaves), and aria-multiselectable in multiple mode. Give the tree a Label or LabelledBy.

Keyboard interactions