Layout

TwTreeList

TwTreeList is a Blazor tree view for nested, expandable data. Set Label, Icon and Disabled per node, show checkboxes, and bind Checked and Collapsed.

Last updated 24 September 2026

Basic Usage

Build a tree by nesting TwTreeListItem tags inside a TwTreeList - and inside each other, for children. A node with nested items can be expanded or collapsed by clicking it.

Documents
- resume.pdf
- cover-letter.docx
Pictures
- holiday.jpg
- profile.png
readme.md

Razor

<TwTreeList AriaLabel="File explorer">
    <TwTreeListItem Label="Documents">
        <TwTreeListItem Label="resume.pdf" />
        <TwTreeListItem Label="cover-letter.docx" />
    </TwTreeListItem>
    <TwTreeListItem Label="Pictures">
        <TwTreeListItem Label="holiday.jpg" />
        <TwTreeListItem Label="profile.png" />
    </TwTreeListItem>
    <TwTreeListItem Label="readme.md" />
</TwTreeList>

Default Expanded

Set Collapsed="false" on a node so its children are already visible on first render.

src
- Components
  - TwTreeList.razor
  - TwTreeListItem.razor
- TwBlazorComponentBase.cs
TwBlazor.csproj

Razor

<TwTreeList AriaLabel="Project structure">
    <TwTreeListItem Label="src" Collapsed="false">
        <TwTreeListItem Label="Components" Collapsed="false">
            <TwTreeListItem Label="TwTreeList.razor" />
            <TwTreeListItem Label="TwTreeListItem.razor" />
        </TwTreeListItem>
        <TwTreeListItem Label="TwBlazorComponentBase.cs" />
    </TwTreeListItem>
    <TwTreeListItem Label="TwBlazor.csproj" />
</TwTreeList>

Selecting a Node

Assign OnClick on a node to react when it's activated by click or keyboard (Enter/Space).

Reports
- Q1.xlsx
- Q2.xlsx
summary.pdf

Selected: none

Razor

<TwTreeList AriaLabel="Select a file">
    <TwTreeListItem Label="Reports">
        <TwTreeListItem Label="Q1.xlsx" OnClick="@(() => OnFileSelected("Q1.xlsx"))" />
        <TwTreeListItem Label="Q2.xlsx" OnClick="@(() => OnFileSelected("Q2.xlsx"))" />
    </TwTreeListItem>
    <TwTreeListItem Label="summary.pdf" OnClick="@(() => OnFileSelected("summary.pdf"))" />
</TwTreeList>
<p class="mt-4 text-sm text-gray-600 dark:text-white">Selected: <strong>@(selectedFile ?? "none")</strong></p>

CSHARP

@code {
    private string? selectedFile;
    
    private void OnFileSelected(string label) => selectedFile = label;
}

Checkboxes

Set ShowCheckboxes on the tree to render a checkbox next to each node. Checking or unchecking a node cascades to all of its descendants, and a parent whose children disagree renders indeterminate (a dash) rather than a plain check.

src
- Program.cs
- Startup.cs
tests
- UnitTests.csproj
- IntegrationTests.csproj

Razor

<TwTreeList ShowCheckboxes AriaLabel="Select project files">
    <TwTreeListItem Label="src" Collapsed="false">
        <TwTreeListItem Label="Program.cs" Checked="true" />
        <TwTreeListItem Label="Startup.cs" />
    </TwTreeListItem>
    <TwTreeListItem Label="tests" Collapsed="false">
        <TwTreeListItem Label="UnitTests.csproj" Checked="true" />
        <TwTreeListItem Label="IntegrationTests.csproj" Checked="true" />
    </TwTreeListItem>
</TwTreeList>

Disabled Nodes

Set Disabled on a node to prevent it from expanding or raising OnClick.

Shared
- team-notes.txt
Locked
- secret.txt

Razor

<TwTreeList AriaLabel="File explorer with a locked folder">
    <TwTreeListItem Label="Shared" Collapsed="false">
        <TwTreeListItem Label="team-notes.txt" />
    </TwTreeListItem>
    <TwTreeListItem Label="Locked" Disabled="true" Collapsed="false">
        <TwTreeListItem Label="secret.txt" />
    </TwTreeListItem>
</TwTreeList>

Custom Icons

Every node shows a folder or file icon by default. Set Icon on a node to override it.

Photos
Videos
Favorites

Razor

<TwTreeList AriaLabel="Mixed content types">
    <TwTreeListItem Label="Photos" Icon="Icon.Image" />
    <TwTreeListItem Label="Videos" Icon="Icon.Camera_Video" />
    <TwTreeListItem Label="Favorites" Icon="Icon.Star_Fill" />
</TwTreeList>

Hiding Icons

Set HideIcons on the tree for a plainer look with just labels and the expand/collapse chevron.

Documents
- resume.pdf
readme.md

Razor

<TwTreeList HideIcons AriaLabel="File explorer without icons">
    <TwTreeListItem Label="Documents">
        <TwTreeListItem Label="resume.pdf" />
    </TwTreeListItem>
    <TwTreeListItem Label="readme.md" />
</TwTreeList>

Building From Your Own Data

A node is just a component, so a tree built from your own data is a normal @foreach - no separate model type to learn. OnClick works the same regardless of how a node was created, so clicking a team here calls into ITwDialogService to show its members.

Engineering
- Platform
- Mobile
Marketing
- Content
- Growth

Razor

<TwTreeList AriaLabel="Departments">
    @foreach (var department in departments)
    {
        @if (department.Teams.Count > 0)
        {
            <TwTreeListItem Label="@department.Name" Collapsed="false">
                @foreach (var team in department.Teams)
                {
                    <TwTreeListItem Label="@team" OnClick="@(() => ShowTeamMembers(team))" />
                }
            </TwTreeListItem>
        }
        else
        {
            <TwTreeListItem Label="@department.Name" />
        }
    }
</TwTreeList>

CSHARP

@code {
    private sealed class Department
    {
        public string Name { get; set; } = string.Empty;
        public List<string> Teams { get; set; } = [];
    }
    
    private readonly List<Department> departments =
    [
        new() { Name = "Engineering", Teams = ["Platform", "Mobile"] },
        new() { Name = "Marketing", Teams = ["Content", "Growth"] },
    ];
    
    private static readonly string[] _namePool =
    [
        "Alice Johnson", "Bob Smith", "Carol Lee", "David Kim", "Priya Patel",
        "Wei Zhang", "Fatima Al-Sayed", "Liam O'Brien", "Sofia Rossi", "Noah Muller"
    ];
    
    private Task ShowTeamMembers(string team)
    {
        var members = _namePool.OrderBy(_ => Random.Shared.Next()).Take(3);
    
        return DialogService.ShowAsync<ConfirmDialog>(team,
            new TwDialogParameters { ["Message"] = $"Team members: {string.Join(", ", members)}" });
    }
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwTreeListTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Container`	string
`Group`	string
`Row`	string
`RowDisabled`	string
`ToggleSlot`	string
`ToggleIcon`	string
`ToggleIconOpen`	string
`Label`	string
`ItemIcon`	string
`CheckboxWrapper`	string
`ItemOutline`	string

Full reference: TwTreeListTheme on the API docs.