VanillaTree

A tree view with no dependencies: one small script, keyboard and screen reader support, IE 10 and up.

Project files

Folders open and close on a click; files get selected. Right-click a name, or press the context menu key, for its menu.

Events

Keyboard

Tab: Into the tree, to the selected leaf or the first one
↑ ↓: Previous and next visible leaf
→: Open a closed leaf; on an open one, go to its first child
←: Close an open leaf; otherwise go to its parent
Home End: First and last visible leaf
Enter Space: Select; open or close a leaf that can't be selected
Shift+F10, context menu key: The menu; arrows, Enter and Esc inside it

Install

npm install vanillatree

import VanillaTree from 'vanillatree';
import 'vanillatree/vanillatree.css';

const tree = new VanillaTree('#tree', { placeholder: 'Nothing here yet' });
tree.add({ label: 'src', id: 'src', opened: true, selectable: false });
tree.add({ label: 'index.ts', parent: 'src', selected: true });

Or with a script tag: <script src="https://cdn.jsdelivr.net/npm/vanillatree@1/dist/vanillatree.min.js"></script>. Everything else is in the README.