Tree View

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.

fluent-tree-view

Setup

import {
    provideFluentDesignSystem,
    fluentTreeItem,
    fluentTreeView
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentTreeItem(),
        fluentTreeView()
    );

Customize the glyph

import {
    provideFluentDesignSystem,
    fluentTreeItem,
    fluentTreeView
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentTreeItem({
            expandCollapseGlyph: `...your expand/collapse glyph`
        }),
        fluentTreeView()
    );

Example

Please see the Blazor documentation and demo site for more information.

Additional Resources

Code in GitHub W3C Component Aria Practices