LayoutUI
Theme Presets
Browse Components

Tree

Browse and select items in a hierarchical collection.

Basic

Select a row; use its chevron to expand or collapse a branch.

  • src
    • components
      • button.html
      • card.html
    • styles
      • theme.css
  • public
    • favicon.svg
  • README.md
View Code
HTML
<ul class="tree" data-tree aria-label="Project files">
  <li data-tree-value="src" data-expanded="true">
    <span class="tree-row">
      <span class="tree-label">
        src
      </span>
    </span>
    <ul>
      <li data-tree-value="src/components" data-expanded="true">
        <span class="tree-row">
          <span class="tree-label">
            components
          </span>
        </span>
        <ul>
          <li data-tree-value="src/components/button.html" data-selected="true">
            <span class="tree-row">
              <span class="tree-label">
                button.html
              </span>
            </span>
          </li>
          <li data-tree-value="src/components/card.html">
            <span class="tree-row">
              <span class="tree-label">
                card.html
              </span>
            </span>
          </li>
        </ul>
      </li>
      <li data-tree-value="src/styles">
        <span class="tree-row">
          <span class="tree-label">
            styles
          </span>
        </span>
        <ul>
          <li data-tree-value="src/styles/theme.css">
            <span class="tree-row">
              <span class="tree-label">
                theme.css
              </span>
            </span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li data-tree-value="public">
    <span class="tree-row">
      <span class="tree-label">
        public
      </span>
    </span>
    <ul>
      <li data-tree-value="public/favicon.svg">
        <span class="tree-row">
          <span class="tree-label">
            favicon.svg
          </span>
        </span>
      </li>
    </ul>
  </li>
  <li data-tree-value="README.md">
    <span class="tree-row">
      <span class="tree-label">
        README.md
      </span>
    </span>
  </li>
</ul>

Collapsed

Arrow keys expand branches and move through visible items.

  • src
    • components
      • button.html
      • card.html
    • styles
      • theme.css
  • public
    • favicon.svg
  • README.md
View Code
HTML
<ul class="tree" data-tree aria-label="Project files">
  <li data-tree-value="src" data-expanded="false">
    <span class="tree-row">
      <span class="tree-label">
        src
      </span>
    </span>
    <ul>
      <li data-tree-value="src/components" data-expanded="false">
        <span class="tree-row">
          <span class="tree-label">
            components
          </span>
        </span>
        <ul>
          <li data-tree-value="src/components/button.html">
            <span class="tree-row">
              <span class="tree-label">
                button.html
              </span>
            </span>
          </li>
          <li data-tree-value="src/components/card.html">
            <span class="tree-row">
              <span class="tree-label">
                card.html
              </span>
            </span>
          </li>
        </ul>
      </li>
      <li data-tree-value="src/styles">
        <span class="tree-row">
          <span class="tree-label">
            styles
          </span>
        </span>
        <ul>
          <li data-tree-value="src/styles/theme.css">
            <span class="tree-row">
              <span class="tree-label">
                theme.css
              </span>
            </span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li data-tree-value="public">
    <span class="tree-row">
      <span class="tree-label">
        public
      </span>
    </span>
    <ul>
      <li data-tree-value="public/favicon.svg">
        <span class="tree-row">
          <span class="tree-label">
            favicon.svg
          </span>
        </span>
      </li>
    </ul>
  </li>
  <li data-tree-value="README.md">
    <span class="tree-row">
      <span class="tree-label">
        README.md
      </span>
    </span>
  </li>
</ul>

Disabled item

Unavailable items remain readable and are skipped by keyboard navigation.

  • src
    • components
      • button.html
      • card.html
    • styles
      • theme.css
  • public
    • favicon.svg
  • README.md
View Code
HTML
<ul class="tree" data-tree aria-label="Project files">
  <li data-tree-value="src" data-expanded="true">
    <span class="tree-row">
      <span class="tree-label">
        src
      </span>
    </span>
    <ul>
      <li data-tree-value="src/components" data-expanded="true">
        <span class="tree-row">
          <span class="tree-label">
            components
          </span>
        </span>
        <ul>
          <li data-tree-value="src/components/button.html" data-selected="true">
            <span class="tree-row">
              <span class="tree-label">
                button.html
              </span>
            </span>
          </li>
          <li data-tree-value="src/components/card.html">
            <span class="tree-row">
              <span class="tree-label">
                card.html
              </span>
            </span>
          </li>
        </ul>
      </li>
      <li data-tree-value="src/styles">
        <span class="tree-row">
          <span class="tree-label">
            styles
          </span>
        </span>
        <ul>
          <li data-tree-value="src/styles/theme.css">
            <span class="tree-row">
              <span class="tree-label">
                theme.css
              </span>
            </span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li data-tree-value="public">
    <span class="tree-row">
      <span class="tree-label">
        public
      </span>
    </span>
    <ul>
      <li data-tree-value="public/favicon.svg">
        <span class="tree-row">
          <span class="tree-label">
            favicon.svg
          </span>
        </span>
      </li>
    </ul>
  </li>
  <li data-tree-value="README.md" data-disabled>
    <span class="tree-row">
      <span class="tree-label">
        README.md
      </span>
    </span>
  </li>
</ul>

Right-to-left

Indentation and horizontal navigation follow reading direction.

  • src
    • components
      • button.html
      • card.html
    • styles
      • theme.css
  • public
    • favicon.svg
  • README.md
View Code
HTML
<ul class="tree" dir="rtl" data-tree aria-label="Project files">
  <li data-tree-value="src" data-expanded="true">
    <span class="tree-row">
      <span class="tree-label">
        src
      </span>
    </span>
    <ul>
      <li data-tree-value="src/components" data-expanded="true">
        <span class="tree-row">
          <span class="tree-label">
            components
          </span>
        </span>
        <ul>
          <li data-tree-value="src/components/button.html" data-selected="true">
            <span class="tree-row">
              <span class="tree-label">
                button.html
              </span>
            </span>
          </li>
          <li data-tree-value="src/components/card.html">
            <span class="tree-row">
              <span class="tree-label">
                card.html
              </span>
            </span>
          </li>
        </ul>
      </li>
      <li data-tree-value="src/styles">
        <span class="tree-row">
          <span class="tree-label">
            styles
          </span>
        </span>
        <ul>
          <li data-tree-value="src/styles/theme.css">
            <span class="tree-row">
              <span class="tree-label">
                theme.css
              </span>
            </span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li data-tree-value="public">
    <span class="tree-row">
      <span class="tree-label">
        public
      </span>
    </span>
    <ul>
      <li data-tree-value="public/favicon.svg">
        <span class="tree-row">
          <span class="tree-label">
            favicon.svg
          </span>
        </span>
      </li>
    </ul>
  </li>
  <li data-tree-value="README.md">
    <span class="tree-row">
      <span class="tree-label">
        README.md
      </span>
    </span>
  </li>
</ul>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.csstree-view.csstree-view.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/tree-view.css">
<script defer src="/library/assets/tree-view.js"></script>

9,936 bytes CSS including base · 5,398 bytes runtime JavaScript

Usage

Usage

Use ul.tree[data-tree] with an accessible name, nested li[data-tree-value], .tree-row and .tree-label. A direct child ul forms a branch. data-expanded=true opens a branch and data-selected=true sets the initial selection; data-disabled disables an item. Load tree-view.js for single selection, roving focus, arrow keys, Home/End, typeahead and Enter/Space selection. Chevron clicks expand; row clicks select; double-click expands a branch. RTL reverses horizontal arrow keys. Listen for tree:change with detail.value, label and item; the application owns navigation or content updates. No multi-selection, drag/drop or lazy loading. Call layoutTree.refresh(root) after changing markup and layoutTree.destroy(root) before unmounting. Without JavaScript the full nested list stays readable.

Themes and layout

Shared surface, text, border and radius tokens follow the active theme. Keep labels readable and allow content to wrap on narrow screens.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.