TreeView

As defined by the W3C:

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. For example, in a file system navigator that uses a tree view to display folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

<FluentTreeView> wraps the <fluent-tree-view> element, a web component implementation of a tree view leveraging the Fluent UI design system. It uses the <FluentTreeItem> component to define the nodes.

NOTE: When construction a tree by specifying FluentTreeItem components, an item can not be deselected by setting the SelectedItem parameter value to null. This only works when using the Items collection.

When using a TreeView with dynamic items, always use th Items collection to define the tree structure. The FluentTreeItem component should only be used to define the tree nodes when the tree structure is static.

Examples

Default with event handling

Dynamic tree generation via Items

Multi-select

With Unlimited Items

Flat tree

Some expanded

Pre-selected tree item

Disabled tree item

With several nested items (expanded)

With data binding

Documentation