Tree

A collapsible hierarchical tree.

import { BuiTree } from 'ng-blatui';

<bui-tree [items]="files" />
// files = [{ label: 'src', expanded: true, children: [...] }]

File tree (icons)

<bui-tree [items]="files" ariaLabel="Project files" />
// leaf items can set icon: 'file-code' etc; parents auto-render folders

Expanded

<!-- set expanded: true on nodes to open them initially -->
<bui-tree [items]="items" />
// items = [{ label: 'src', expanded: true, children: [{ label: 'app', expanded: true, children: [...] }] }]

API reference

bui-tree

Inputs

Prop	Type	Default	Description
`items`	`readonly TreeItem[]`	`[]`	Root nodes of the tree to render.
`ariaLabel`	`string`	`'Tree'`	Accessible label for the tree's root element.

bui-tree-node

Inputs

Prop	Type	Default	Description
`item`*	`TreeItem`	—	Node data for this row, including its label and children.
`level`	`number`	`1`	Depth of this node, used for indentation and `aria-level` (root is 1).

Types

TreeItem

Field	Type	Description
`label`	`string`	Text displayed for the node.
`children`?	`TreeItem[]`	Nested child nodes, if any.
`expanded`?	`false \| true`	Whether the node starts expanded.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.