Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsData display

Tree view

A hierarchy people can expand, collapse and select from: folders, categories, organisation charts. Choose it when depth matters; for one level of grouping a nested list is lighter.

Declared items

Nest MudTreeViewItem elements to write a small tree by hand. IconExpanded swaps the icon of an open branch, and Expanded opens it on first render.

  • Plate archive

    • 1920s

      • Orion, 1924

      • Pleiades, 1927

    • 1930s

  • Observing logs

  • Visitor book

Selection modes

SingleSelection keeps one item selected, ToggleSelection lets a second click clear it, and MultiSelection adds checkboxes. Values come from each item's Value.

  • Bread

    • Sourdough

    • Rye

  • Pastry

    • Croissant

    • Cardamom bun

Selected: Rye.

Checkboxes, tri-state and parents

In MultiSelection, TriState shows a dash on partly selected branches and AutoSelectParent ticks a parent when all its children are ticked. Try both switches.

  • All stations

    • Highlands

      • Ben Alder ridge

      • Loch Ossian shore

      • Corrour moor

    • Coast

      • Harbour wall

      • Saltmarsh point

Download includes: Harbour wall.

Lazy loading with ServerData

Items start without children. When a branch opens, ServerData fetches its children and the expand button shows a loading icon meanwhile. Expandable = false marks leaves.

  • Northgate depot

  • Harbour depot

Open a depot to load its lines.

Data-bound items and custom templates

Items takes TreeItemData objects and ItemTemplate renders each one. Derive from TreeItemData to carry your own fields, and use BodyContent to lay out the row yourself.

EndText from a derived item

  • Fiction

    412

    • Crime

      96

    • Historical

      71

    • Poetry

      18

  • Non-fiction

    538

    • Nature

      120

    • Local history

      14

BodyContent laid out by hand

  • Fiction

    412

    • Crime

      96

    • Historical

      71

    • Poetry

      18, low

  • Non-fiction

    538

    • Nature

      120

    • Local history

      14, low

A file explorer

A filterable tree beside a details panel: FilterFunc decides which items stay visible, FilterAsync reapplies it as you type, and SelectedValue drives the panel.

Find a file

  • survey-2026

  • calibration-certificates.pdf

Select a file or folder to see its details.

Playground

Change the tree's parameters; the markup lists only the values that differ from the defaults.

  • Recipes

    • Breads

      • Sourdough

      • Seeded rye

    • Cakes

Selection mode
Color
<MudTreeView T="string" Hover="true">
    <MudTreeViewItem Value="@("Recipes")" Expanded="true">…</MudTreeViewItem>
</MudTreeView>

Starting .NET in your browser…