Tree

File explorer

Nesting is the whole structure: an item opens when it carries open, and its depth is what indents the row while the highlight still spans the full width.

src
- Controller
  - AppController.php
  - HomeController.php
- Model
  - App.php
- Kernel.php
front
- index.html.twig
composer.json

AppController.php

The tree carries no width and no height of its own: the zone beside it is an ordinary one, and each side scrolls alone.

Vue

Same markup, same shape, but the folders open and close: the chevron is what folds a node, and a click anywhere else on the row selects the item and sends it up as a select event.

Vue, in a workspace

The explorer as an app ships it: the vue tree in the scrollable zone of a split, holding more rows than the zone is tall and longer names than it is wide. The zone scrolls on both axes and the horizontal bar stays at its floor, whatever the last row is.

Pages

The tree carries no width and no height of its own: the zone beside it is an ordinary one, and each side scrolls alone.

Without icons

The shape knows nothing about files — an item with no icon and no link renders as plain text.

Root
- First child
- Second child