Data display

Tree View

A navigation tree of nested links whose branches open and close, with arrow-key navigation.

Class name	Type	Description
`tree-viewplf:tree-view`	Component	The tree's top list
`tree-view-itemplf:tree-view-item`	Part	An item: a row and an optional group
`tree-view-linkplf:tree-view-link`	Part	A row: a link, or a span for a folder
`tree-view-groupplf:tree-view-group`	Part	A nested list of items
`tree-view-iconplf:tree-view-icon`	Part	An SVG icon before the label; an icon class there doesn't need it

Default

The tree needs aria-label or aria-labelledby, or it does not start.

<nav class="card" aria-label="Product documentation">
  <div class="card-body">
    <ul class="tree-view" data-plf-tree-view aria-label="Documentation pages">
      <li class="tree-view-item"><a class="tree-view-link" href="#">Introduction</a></li>
      <li class="tree-view-item" data-plf-expanded><a class="tree-view-link" href="#">Getting started</a>
        <ul class="tree-view-group">
          <li class="tree-view-item"><a class="tree-view-link" href="#">Installation</a></li>
          <li class="tree-view-item"><a class="tree-view-link" href="#">Themes</a></li>
        </ul>
      </li>
      <li class="tree-view-item"><a class="tree-view-link" href="#">Components</a>
        <ul class="tree-view-group">
          <li class="tree-view-item"><a class="tree-view-link" href="#">Forms</a>
            <ul class="tree-view-group">
              <li class="tree-view-item"><a class="tree-view-link" href="#">Input</a></li>
              <li class="tree-view-item"><a class="tree-view-link" href="#" aria-current="page">Select</a></li>
              <li class="tree-view-item"><a class="tree-view-link" href="#">Date Picker</a></li>
            </ul>
          </li>
          <li class="tree-view-item"><a class="tree-view-link" href="#">Button</a></li>
          <li class="tree-view-item"><a class="tree-view-link" href="#">Card</a></li>
          <li class="tree-view-item"><a class="tree-view-link" href="#">Tree View</a></li>
        </ul>
      </li>
      <li class="tree-view-item"><a class="tree-view-link" href="#">Changelog</a></li>
    </ul>
  </div>
</nav>

<nav class="plf:card" aria-label="Product documentation">
  <div class="plf:card-body">
    <ul class="plf:tree-view" data-plf-tree-view aria-label="Documentation pages">
      <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Introduction</a></li>
      <li class="plf:tree-view-item" data-plf-expanded><a class="plf:tree-view-link" href="#">Getting started</a>
        <ul class="plf:tree-view-group">
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Installation</a></li>
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Themes</a></li>
        </ul>
      </li>
      <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Components</a>
        <ul class="plf:tree-view-group">
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Forms</a>
            <ul class="plf:tree-view-group">
              <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Input</a></li>
              <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#" aria-current="page">Select</a></li>
              <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Date Picker</a></li>
            </ul>
          </li>
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Button</a></li>
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Card</a></li>
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Tree View</a></li>
        </ul>
      </li>
      <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Changelog</a></li>
    </ul>
  </div>
</nav>

import { CardBody, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react';

export function Example() {
  return (
    <nav className="card" aria-label="Product documentation">
      <CardBody>
        <TreeView aria-label="Documentation pages" defaultExpanded={['getting-started']}>
          <TreeViewItem><TreeViewLink href="#">Introduction</TreeViewLink></TreeViewItem>
          <TreeViewItem value="getting-started">
            <TreeViewLink href="#">Getting started</TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem><TreeViewLink href="#">Installation</TreeViewLink></TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Themes</TreeViewLink></TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">Components</TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink href="#">Forms</TreeViewLink>
                <TreeViewGroup>
                  <TreeViewItem><TreeViewLink href="#">Input</TreeViewLink></TreeViewItem>
                  <TreeViewItem><TreeViewLink href="#" aria-current="page">Select</TreeViewLink></TreeViewItem>
                  <TreeViewItem><TreeViewLink href="#">Date Picker</TreeViewLink></TreeViewItem>
                </TreeViewGroup>
              </TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Button</TreeViewLink></TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Card</TreeViewLink></TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Tree View</TreeViewLink></TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem><TreeViewLink href="#">Changelog</TreeViewLink></TreeViewItem>
        </TreeView>
      </CardBody>
    </nav>
  );
}

import { CardBody, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <nav className="plf:card" aria-label="Product documentation">
      <CardBody>
        <TreeView aria-label="Documentation pages" defaultExpanded={['getting-started']}>
          <TreeViewItem><TreeViewLink href="#">Introduction</TreeViewLink></TreeViewItem>
          <TreeViewItem value="getting-started">
            <TreeViewLink href="#">Getting started</TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem><TreeViewLink href="#">Installation</TreeViewLink></TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Themes</TreeViewLink></TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">Components</TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink href="#">Forms</TreeViewLink>
                <TreeViewGroup>
                  <TreeViewItem><TreeViewLink href="#">Input</TreeViewLink></TreeViewItem>
                  <TreeViewItem><TreeViewLink href="#" aria-current="page">Select</TreeViewLink></TreeViewItem>
                  <TreeViewItem><TreeViewLink href="#">Date Picker</TreeViewLink></TreeViewItem>
                </TreeViewGroup>
              </TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Button</TreeViewLink></TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Card</TreeViewLink></TreeViewItem>
              <TreeViewItem><TreeViewLink href="#">Tree View</TreeViewLink></TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem><TreeViewLink href="#">Changelog</TreeViewLink></TreeViewItem>
        </TreeView>
      </CardBody>
    </nav>
  );
}

File tree

<div class="card">
  <div class="card-body">
    <ul class="tree-view" data-plf-tree-view aria-label="Project files">
      <li class="tree-view-item" data-plf-expanded>
        <span class="tree-view-link"><span class="icon icon-folder"></span><span>src</span></span>
        <ul class="tree-view-group">
          <li class="tree-view-item">
            <span class="tree-view-link">
              <span class="icon icon-folder"></span>
              <span>components</span>
            </span>
            <ul class="tree-view-group">
              <li class="tree-view-item">
                <a class="tree-view-link" href="#">
                  <span class="icon icon-file-text"></span>
                  <span>button.css</span>
                </a>
              </li>
              <li class="tree-view-item">
                <a class="tree-view-link" href="#">
                  <span class="icon icon-file-text"></span>
                  <span>card.css</span>
                </a>
              </li>
              <li class="tree-view-item">
                <a class="tree-view-link" href="#">
                  <span class="icon icon-file-text"></span>
                  <span>tree-view.css</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="tree-view-item">
            <a class="tree-view-link" href="#">
              <span class="icon icon-file-text"></span>
              <span>index.ts</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="tree-view-item">
        <span class="tree-view-link" aria-disabled="true">
          <span class="icon icon-folder"></span>
          <span>archive</span>
        </span>
        <ul class="tree-view-group">
          <li class="tree-view-item">
            <a class="tree-view-link" href="#">
              <span class="icon icon-file-text"></span>
              <span>legacy.css</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="tree-view-item">
        <a class="tree-view-link" href="#">
          <span class="icon icon-file-text"></span>
          <span>package.json</span>
        </a>
      </li>
      <li class="tree-view-item">
        <a class="tree-view-link" href="#">
          <span class="icon icon-file-text"></span>
          <span>README.md</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<div class="plf:card">
  <div class="plf:card-body">
    <ul class="plf:tree-view" data-plf-tree-view aria-label="Project files">
      <li class="plf:tree-view-item" data-plf-expanded>
        <span class="plf:tree-view-link"><span class="plf:icon plf:icon-folder"></span><span>src</span></span>
        <ul class="plf:tree-view-group">
          <li class="plf:tree-view-item">
            <span class="plf:tree-view-link">
              <span class="plf:icon plf:icon-folder"></span>
              <span>components</span>
            </span>
            <ul class="plf:tree-view-group">
              <li class="plf:tree-view-item">
                <a class="plf:tree-view-link" href="#">
                  <span class="plf:icon plf:icon-file-text"></span>
                  <span>button.css</span>
                </a>
              </li>
              <li class="plf:tree-view-item">
                <a class="plf:tree-view-link" href="#">
                  <span class="plf:icon plf:icon-file-text"></span>
                  <span>card.css</span>
                </a>
              </li>
              <li class="plf:tree-view-item">
                <a class="plf:tree-view-link" href="#">
                  <span class="plf:icon plf:icon-file-text"></span>
                  <span>tree-view.css</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="plf:tree-view-item">
            <a class="plf:tree-view-link" href="#">
              <span class="plf:icon plf:icon-file-text"></span>
              <span>index.ts</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="plf:tree-view-item">
        <span class="plf:tree-view-link" aria-disabled="true">
          <span class="plf:icon plf:icon-folder"></span>
          <span>archive</span>
        </span>
        <ul class="plf:tree-view-group">
          <li class="plf:tree-view-item">
            <a class="plf:tree-view-link" href="#">
              <span class="plf:icon plf:icon-file-text"></span>
              <span>legacy.css</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="plf:tree-view-item">
        <a class="plf:tree-view-link" href="#">
          <span class="plf:icon plf:icon-file-text"></span>
          <span>package.json</span>
        </a>
      </li>
      <li class="plf:tree-view-item">
        <a class="plf:tree-view-link" href="#">
          <span class="plf:icon plf:icon-file-text"></span>
          <span>README.md</span>
        </a>
      </li>
    </ul>
  </div>
</div>

import { Card, CardBody, Icon, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react';

export function Example() {
  return (
    <Card>
      <CardBody>
        <TreeView aria-label="Project files" defaultExpanded={['src']}>
          <TreeViewItem value="src">
            <TreeViewLink><Icon name="folder" /><span>src</span></TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink>
                  <Icon name="folder" />
                  <span>components</span>
                </TreeViewLink>
                <TreeViewGroup>
                  <TreeViewItem>
                    <TreeViewLink href="#">
                      <Icon name="file-text" />
                      <span>button.css</span>
                    </TreeViewLink>
                  </TreeViewItem>
                  <TreeViewItem>
                    <TreeViewLink href="#">
                      <Icon name="file-text" />
                      <span>card.css</span>
                    </TreeViewLink>
                  </TreeViewItem>
                  <TreeViewItem>
                    <TreeViewLink href="#">
                      <Icon name="file-text" />
                      <span>tree-view.css</span>
                    </TreeViewLink>
                  </TreeViewItem>
                </TreeViewGroup>
              </TreeViewItem>
              <TreeViewItem>
                <TreeViewLink href="#">
                  <Icon name="file-text" />
                  <span>index.ts</span>
                </TreeViewLink>
              </TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink aria-disabled="true">
              <Icon name="folder" />
              <span>archive</span>
            </TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink href="#">
                  <Icon name="file-text" />
                  <span>legacy.css</span>
                </TreeViewLink>
              </TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>package.json</span>
            </TreeViewLink>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>README.md</span>
            </TreeViewLink>
          </TreeViewItem>
        </TreeView>
      </CardBody>
    </Card>
  );
}

import { Card, CardBody, Icon, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Card>
      <CardBody>
        <TreeView aria-label="Project files" defaultExpanded={['src']}>
          <TreeViewItem value="src">
            <TreeViewLink><Icon name="folder" /><span>src</span></TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink>
                  <Icon name="folder" />
                  <span>components</span>
                </TreeViewLink>
                <TreeViewGroup>
                  <TreeViewItem>
                    <TreeViewLink href="#">
                      <Icon name="file-text" />
                      <span>button.css</span>
                    </TreeViewLink>
                  </TreeViewItem>
                  <TreeViewItem>
                    <TreeViewLink href="#">
                      <Icon name="file-text" />
                      <span>card.css</span>
                    </TreeViewLink>
                  </TreeViewItem>
                  <TreeViewItem>
                    <TreeViewLink href="#">
                      <Icon name="file-text" />
                      <span>tree-view.css</span>
                    </TreeViewLink>
                  </TreeViewItem>
                </TreeViewGroup>
              </TreeViewItem>
              <TreeViewItem>
                <TreeViewLink href="#">
                  <Icon name="file-text" />
                  <span>index.ts</span>
                </TreeViewLink>
              </TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink aria-disabled="true">
              <Icon name="folder" />
              <span>archive</span>
            </TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink href="#">
                  <Icon name="file-text" />
                  <span>legacy.css</span>
                </TreeViewLink>
              </TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>package.json</span>
            </TreeViewLink>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>README.md</span>
            </TreeViewLink>
          </TreeViewItem>
        </TreeView>
      </CardBody>
    </Card>
  );
}

Disabled

<div class="card">
  <div class="card-body">
    <ul class="tree-view" data-plf-tree-view aria-label="Archived files">
      <li class="tree-view-item">
        <a class="tree-view-link" href="#">
          <span class="icon icon-file-text"></span>
          <span>index.ts</span>
        </a>
      </li>
      <li class="tree-view-item">
        <span class="tree-view-link" aria-disabled="true">
          <span class="icon icon-folder"></span>
          <span>archive</span>
        </span>
        <ul class="tree-view-group">
          <li class="tree-view-item">
            <a class="tree-view-link" href="#">
              <span class="icon icon-file-text"></span>
              <span>legacy.css</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="tree-view-item">
        <a class="tree-view-link" href="#">
          <span class="icon icon-file-text"></span>
          <span>package.json</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<div class="plf:card">
  <div class="plf:card-body">
    <ul class="plf:tree-view" data-plf-tree-view aria-label="Archived files">
      <li class="plf:tree-view-item">
        <a class="plf:tree-view-link" href="#">
          <span class="plf:icon plf:icon-file-text"></span>
          <span>index.ts</span>
        </a>
      </li>
      <li class="plf:tree-view-item">
        <span class="plf:tree-view-link" aria-disabled="true">
          <span class="plf:icon plf:icon-folder"></span>
          <span>archive</span>
        </span>
        <ul class="plf:tree-view-group">
          <li class="plf:tree-view-item">
            <a class="plf:tree-view-link" href="#">
              <span class="plf:icon plf:icon-file-text"></span>
              <span>legacy.css</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="plf:tree-view-item">
        <a class="plf:tree-view-link" href="#">
          <span class="plf:icon plf:icon-file-text"></span>
          <span>package.json</span>
        </a>
      </li>
    </ul>
  </div>
</div>

import { Card, CardBody, Icon, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react';

export function Example() {
  return (
    <Card>
      <CardBody>
        <TreeView aria-label="Archived files">
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>index.ts</span>
            </TreeViewLink>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink aria-disabled="true">
              <Icon name="folder" />
              <span>archive</span>
            </TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink href="#">
                  <Icon name="file-text" />
                  <span>legacy.css</span>
                </TreeViewLink>
              </TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>package.json</span>
            </TreeViewLink>
          </TreeViewItem>
        </TreeView>
      </CardBody>
    </Card>
  );
}

import { Card, CardBody, Icon, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Card>
      <CardBody>
        <TreeView aria-label="Archived files">
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>index.ts</span>
            </TreeViewLink>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink aria-disabled="true">
              <Icon name="folder" />
              <span>archive</span>
            </TreeViewLink>
            <TreeViewGroup>
              <TreeViewItem>
                <TreeViewLink href="#">
                  <Icon name="file-text" />
                  <span>legacy.css</span>
                </TreeViewLink>
              </TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>
            <TreeViewLink href="#">
              <Icon name="file-text" />
              <span>package.json</span>
            </TreeViewLink>
          </TreeViewItem>
        </TreeView>
      </CardBody>
    </Card>
  );
}

Client-side routing

Following a link sends no Tree View event, so the script handles the link’s click and marks the link with setCurrent().

<nav class="card" aria-label="Guides">
  <div class="card-body">
    <ul class="tree-view" data-plf-tree-view aria-label="Guide pages" id="tree-view-routing">
      <li class="tree-view-item"><a class="tree-view-link" href="#" aria-current="page">Overview</a></li>
      <li class="tree-view-item"><a class="tree-view-link" href="#">Setup</a>
        <ul class="tree-view-group">
          <li class="tree-view-item"><a class="tree-view-link" href="#">Install</a></li>
          <li class="tree-view-item"><a class="tree-view-link" href="#">Configure</a></li>
        </ul>
      </li>
      <li class="tree-view-item"><a class="tree-view-link" href="#">Deploy</a></li>
    </ul>
  </div>
</nav>
<script>
  const tree = document.getElementById('tree-view-routing');

  tree.addEventListener('click', (event) => {
    const link = event.target.closest('a[href]');
    if (!link || event.defaultPrevented) return;
    event.preventDefault();
    // Show the page with your router, then mark it as current.
    PLF.TreeView.getInstance(tree)?.setCurrent(link);
  });
</script>

<nav class="plf:card" aria-label="Guides">
  <div class="plf:card-body">
    <ul class="plf:tree-view" data-plf-tree-view aria-label="Guide pages" id="tree-view-routing">
      <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#" aria-current="page">Overview</a></li>
      <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Setup</a>
        <ul class="plf:tree-view-group">
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Install</a></li>
          <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Configure</a></li>
        </ul>
      </li>
      <li class="plf:tree-view-item"><a class="plf:tree-view-link" href="#">Deploy</a></li>
    </ul>
  </div>
</nav>
<script>
  const tree = document.getElementById('tree-view-routing');

  tree.addEventListener('click', (event) => {
    const link = event.target.closest('a[href]');
    if (!link || event.defaultPrevented) return;
    event.preventDefault();
    // Show the page with your router, then mark it as current.
    PLF.TreeView.getInstance(tree)?.setCurrent(link);
  });
</script>

'use client';

import { useState } from 'react';
import { CardBody, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react';

export function Example() {
  const [page, setPage] = useState('Overview');

  const link = (name: string) => (
    <TreeViewLink
      href="#"
      aria-current={page === name ? 'page' : undefined}
      onClick={event => {
        if (event.defaultPrevented) return;
        event.preventDefault();
        // Show the page with your router, then mark it as current.
        setPage(name);
      }}
    >
      {name}
    </TreeViewLink>
  );

  return (
    <nav className="card" aria-label="Guides">
      <CardBody>
        <TreeView aria-label="Guide pages">
          <TreeViewItem>{link('Overview')}</TreeViewItem>
          <TreeViewItem>
            {link('Setup')}
            <TreeViewGroup>
              <TreeViewItem>{link('Install')}</TreeViewItem>
              <TreeViewItem>{link('Configure')}</TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>{link('Deploy')}</TreeViewItem>
        </TreeView>
      </CardBody>
    </nav>
  );
}

'use client';

import { useState } from 'react';
import { CardBody, TreeView, TreeViewGroup, TreeViewItem, TreeViewLink } from '@pelatform/react/prefixed';

export function Example() {
  const [page, setPage] = useState('Overview');

  const link = (name: string) => (
    <TreeViewLink
      href="#"
      aria-current={page === name ? 'page' : undefined}
      onClick={event => {
        if (event.defaultPrevented) return;
        event.preventDefault();
        // Show the page with your router, then mark it as current.
        setPage(name);
      }}
    >
      {name}
    </TreeViewLink>
  );

  return (
    <nav className="plf:card" aria-label="Guides">
      <CardBody>
        <TreeView aria-label="Guide pages">
          <TreeViewItem>{link('Overview')}</TreeViewItem>
          <TreeViewItem>
            {link('Setup')}
            <TreeViewGroup>
              <TreeViewItem>{link('Install')}</TreeViewItem>
              <TreeViewItem>{link('Configure')}</TreeViewItem>
            </TreeViewGroup>
          </TreeViewItem>
          <TreeViewItem>{link('Deploy')}</TreeViewItem>
        </TreeView>
      </CardBody>
    </nav>
  );
}

Tree View needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/card.min.css">
<link rel="stylesheet" href="components/tree-view.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/tree-view.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/card.prefixed.min.css">
<link rel="stylesheet" href="components/tree-view.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/tree-view.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-tree-view`	Marks the top `<ul>`, named with `aria-label` or `aria-labelledby`. Each `<li>` starts with an `<a>` row, or a `<span>` row for a branch without a page, then at most one nested `<ul>`
`data-plf-expanded`	On an item, opens its branch at first
`aria-current="page"`	On a row, the current page: the branches above it open and it takes the tab stop
`aria-disabled="true"`	On a row, blocks opening it and following its link; leave out a disabled link’s `href`

The script sets the tree roles, aria-level, aria-setsize, aria-posinset, aria-expanded, a roving tabindex and hidden on closed groups, and adds a chevron with data-plf-part="icon tree-view-toggle" to each branch row, which opens or closes the branch without following its link; clicking a branch’s link also opens or closes it, and follows the link.

Methods

Method	Behavior
`PLF.TreeView.getOrCreateInstance(element)`	Returns the instance, creating it for valid markup
`PLF.TreeView.getInstance(element)`	Returns the instance or `null`
`instance.expand(item)`, `instance.collapse(item)`, `instance.toggle(item)`	Open, close or toggle a branch; return `false` when canceled, unchanged, disabled or not a branch
`instance.reveal(item)`	Opens the item’s ancestors and gives it the tab stop without focusing it; returns `false` when an ancestor cannot open
`instance.setCurrent(item)`	Moves `aria-current="page"` to the item’s row and reveals it, as after client-side navigation; returns as `reveal()`
`instance.getState()`	Returns `{expanded, active}`: the open items and the item with the tab stop
`instance.destroy()`	Removes listeners, the chevrons and the attributes the script set, so every group shows

Methods take an item or its row.

Events

Event	When
`plf:tree-view:before-toggle`	Before a branch opens or closes; cancelable
`plf:tree-view:toggle`	After it opens or closes

Each event’s detail:

Property	Value
`instance`	The Tree View instance
`item`	The branch’s `<li>`
`expanded`	The new state: `true` when the branch opens, `false` when it closes
`reason`	`api`, `keyboard` or `pointer`
`trigger`	The clicked or focused row, or `null` from a method

Keyboard

Key	Action
Down Arrow, Up Arrow	Move to the next or previous visible row
Home, End	Move to the first or last visible row
Right Arrow	Opens a closed branch, or moves to its first child; reversed right to left
Left Arrow	Closes an open branch, or moves to the parent; reversed right to left
Enter	Follows a link; on a `<span>` row, opens or closes the branch
Space	On a `<span>` row, opens or closes the branch
`*`	Opens every branch at the current level
A character	Moves to the next visible row that starts with it

React

TreeView from @pelatform/react renders this tree: it keeps its open branches, or the application sets them with expanded, and each part is a component of its own.

Prop	Values	Default
`expanded`	The open items’ `value`s, which the application changes in `onExpandedChange`; keeping them refuses the change	Its own state
`defaultExpanded`	The items open at first when the application does not set `expanded`; the branches above the current page open too	None
`onExpandedChange`	`(expanded)`, called when a branch opens or closes	None

The parts:

Part	Element
`TreeViewItem`	An `li` with `tree-view-item`; `value` names it in `expanded`
`TreeViewLink`	A row with `tree-view-link`: a link with `href`, or a `span` for a folder; a branch’s row draws its chevron, `aria-current` marks the current page, which opens the branches above it, and `aria-disabled="true"` blocks the row
`TreeViewGroup`	A `ul` with `tree-view-group`, the item’s branch

The other props are the element’s own, className and ref included.

CSS variables

Variable	Default
`--plf-tree-view-color`	Text
`--plf-tree-view-gap`	Space 1 (4px) between rows
`--plf-tree-view-hover-bg`	Muted surface
`--plf-tree-view-current-bg`	`--plf-color-primary-subtle`, on the current page
`--plf-tree-view-current-color`	`--plf-color-primary-text`, on the current page
`--plf-tree-view-guide-color`	`--plf-color-border-subtle`, the line beside a nested group