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

FluentTreeView

<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.

Usage

@using Microsoft.Fast.Components.FluentUI
<FluentTreeView>
    <FluentTreeItem>
        Root item 1
        <FluentTreeItem>
            Flowers
            <FluentTreeItem Disabled="true">Daisy</FluentTreeItem>
            <FluentTreeItem>Sunflower</FluentTreeItem>
            <FluentTreeItem>Rose</FluentTreeItem>
        </FluentTreeItem>
        <FluentTreeItem>Nested item 2</FluentTreeItem>
        <FluentTreeItem>Nested item 3</FluentTreeItem>
    </FluentTreeItem>
    <FluentTreeItem>
        Root item 2 - Leaf Erikson
    </FluentTreeItem>
</FluentTreeView>

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

Code in GitHub W3C Component Aria Practices