Tree view

51 · Extended UI

Shows nested data such as category › subcategory › product group as collapsible branches. The whole structure is passed as a single items array.

PRO acun:tree

Basic usage

Every item in items has a label; child items go in the children array, with no depth limit. Branches start collapsed and open with the arrow button to the left of the name. The structure is marked with role="tree"; screen readers announce the arrow button as "Expand" or "Collapse".

LIVE EXAMPLE

<acun:tree :items="[
    ['label' => 'Electronics', 'children' => [
        ['label' => 'Computers', 'children' => [['label' => 'Laptops'], ['label' => 'Desktops']]],
        ['label' => 'Phones', 'children' => [['label' => 'Smartphones']]],
    ]],
    ['label' => 'Clothing', 'children' => [['label' => 'Women']]],
]" />

Prop	Values
`items`	Array of ['label' => …, 'children' => […]]

Start expanded

expanded starts all branches open. To control a single branch, give the item open; an item's open always takes precedence over expanded, so you can keep some branches closed in an expanded tree with 'open' => false.

LIVE EXAMPLE

<acun:tree expanded :items="[
    ['label' => 'Electronics', 'children' => [
        ['label' => 'Computers', 'children' => [['label' => 'Laptop computers'], ['label' => 'Desktop computers']]],
        ['label' => 'Accessories', 'open' => false, 'children' => [['label' => 'Headphones']]],
    ]],
]" />

Prop	Values
`expanded`	true \| false (default false)
`open`	Per item: true \| false

Link and counter

An item with href has its name turned into a link. badge shows a small counter on the right of the row; use it to show the number of child records.

LIVE EXAMPLE

<acun:tree :items="[
    ['label' => 'Electronics', 'open' => true, 'badge' => 5, 'children' => [
        ['label' => 'Computers', 'href' => '#computers', 'badge' => 3],
        ['label' => 'Phones', 'href' => '#phones', 'badge' => 1],
        ['label' => 'Accessories', 'href' => '#accessories', 'badge' => 1],
    ]],
]" />

Prop	Values
`href`	Link URL
`badge`	Counter on the right (a number or short text)

API

Props and slots

The values the component accepts.

Prop	Default	Description
`items`	`[]`	Array of items (with the keys below)
`expanded`	`false`	Starts all branches open
`items[].label`	—	Displayed name (required)
`items[].children`	`[]`	Child items, with the same structure
`items[].open`	`expanded`	Starts this branch open or closed
`items[].href`	`null`	If given, the name becomes a link
`items[].badge`	`null`	Counter on the right