Blazor Blueprint Blazor Blueprint
Previous Tooltip

Tree View

A headless tree view primitive with hierarchical data display, keyboard navigation, ARIA attributes, single/multiple selection, tri-state checkboxes with parent/child cascade, and expand/collapse state management.

File Explorer

A realistic file tree with Icon per node, DefaultExpandDepth="1" to auto-expand the first level, and ExpandOnClick so clicking a folder toggles it.
src
App.razor
Program.cs
wwwroot
favicon.ico
README.md
.gitignore

Multi-Selection

Set SelectionMode="TreeSelectionMode.Multiple" to allow selecting multiple nodes. Bind with @bind-SelectedValues to track selected items as a HashSet<string>.
Frontend
React
Vue
Angular
Blazor
Backend
.NET
Node.js
Python
DevOps
Docker
Kubernetes

Selected (0): none

Checkboxes

Set Checkable="true" to enable tri-state checkboxes. Parent nodes automatically reflect child check state with indeterminate support. Set CheckStrictly="true" to disable cascade.
Select All
Read
Write
Delete

Checked: none

Search & Filter

Set ShowSearch="true" with data-driven mode (Items, TextField, ValueField, ChildrenProperty) for built-in filtering. Matching nodes and their ancestors are shown while typing.
Engineering
Frontend
Backend
Infrastructure
Quality Assurance
Design
UX Research
UI Design
Brand
Product
Product Management
Analytics

Connector Lines

Set ShowLines="true" to render connector lines between parent and child nodes. Useful for visualizing organizational hierarchies.
CEO
CTO
Engineering Lead
Architect
CFO
Accounting
Finance
CMO
Marketing
Sales

Disabled Nodes

Set Disabled="true" on a BbTreeItem to prevent selection and interaction. Disabled nodes appear dimmed and are skipped during keyboard navigation.
Active Projects
Project Alpha
Project Beta
Archived Projects
Legacy App
App v1.0
Restricted Access

Anatomy

<BbTreeView>                              <!-- root: role="tree", manages state -->
    <BbTreeItem Value="parent">              <!-- role="treeitem", aria-expanded -->
        <NodeContent>...</NodeContent>       <!-- node row content -->
        <ChildContent>                       <!-- nested children -->
            <BbTreeItem Value="child">       <!-- role="treeitem" -->
                <NodeContent>...</NodeContent>
            </BbTreeItem>
        </ChildContent>
    </BbTreeItem>
</BbTreeView>
View source on GitHub
Previous Tooltip