bit Bheadless

Tree View

A hierarchical list — file explorers, navigation, nested settings — with expand / collapse, single, multiple and checkbox selection, lazy loading and typeahead.

Implementation: CSS Tailwind

File explorer

The WAI-ARIA Tree View pattern. Click a row to select it (@bind-SelectedValue) or the chevron (BitBhTreeItemToggle) to expand without selecting. Keyboard: Up / Down move, Right expands or enters a folder, Left collapses or returns to the parent, Home / End jump, * expands every sibling, Enter (or double click) fires OnItemActivate, and typing a name jumps to it (typeahead, matched against Label). aria-level, aria-setsize, aria-posinset and the roving tabindex are computed for you; disabled items are skipped.

  • 📂 src
    • 📂 components
      • 📄 Button.razor
      • 📄 Tree.razor
    • 📄 Program.cs
  • 🔒 secrets.json locked
  • 📄 README.md

Selected: src/components/Tree.razor · Last activated: —

Data-driven (recursive)

Render the tree from a model with a recursive RenderFragment<Node> helper. Each BitBhTreeItem works out its depth from where it is rendered, so the markup is the same at every level. Supplying @bind-ExpandedValues makes expansion controlled, so plain buttons can expand or collapse everything.

  • Components2
    • Collections3
      • Listbox
      • Tree View
      • Grid

Selected: tree · Expanded: 2

Multiple selection

SelectionMode="BitBhTreeSelectionMode.Multiple" sets aria-multiselectable and binds with @bind-SelectedValues. Click selects one item, Ctrl / ⌘ + click toggles, Shift + click selects a range. Keyboard: Space toggles the focused item, Shift + Up / Down extends the selection, Ctrl + A selects everything.

  • 📥 Inbox 3
    • 📁 Work
    • 📁 Personal
    • 📁 Receipts
  • 🗂️ Projects 3
    • 📁 Apollo
    • 📁 Gemini
    • 📁 Mercury

0 selected: —

Hierarchical checkboxes

Checkboxes="true" turns the tree into a hierarchical picker: checking a parent checks all of its descendants, and a parent whose leaves are only partly checked reports aria-checked="mixed". Every item also emits data-checked="true|false|mixed", so the box below is drawn with CSS alone. Click a row or press Space to toggle it.

  • Desktop app
    • Core runtime
    • Spell checker
    • Themes
      • Light
      • Dark
      • High contrast
  • Offline documentation

Installing: Core runtime, Light, Dark

Lazy loading

Mark folders whose children are not loaded yet with HasChildren="true" and supply LoadChildren. It runs the first time a folder expands; meanwhile the item reports aria-busy="true" (and IsLoading in its Template) so you can show a spinner. The folder opens once the children are rendered.

An unhandled error has occurred. Reload 🗙