Tree

Styles live in scss/components/_tree.scss. A tree is a nested <ul class="tree"> with role="tree", expandable folders, and file rows. The component is narrow by default (150px); widen it in your layout when labels are longer.

Expand/collapse toggle

.tree__toggle is a 24px round control with a 16px chevron. Add .tree__toggle--open to rotate the arrow. Use aria-expanded and aria-controls on the button, and toggle the hidden attribute on the matching .tree__group.

Level 1 row states

Each row is a flex line: toggle + .tree__content (16px icon in a 20px slot + label). Selected rows use .tree__row--selected and aria-current="true" on the label button.

Levels 2 and 3 (live)

.tree__row--level-2 indents folders. Files at level 3 use .tree__row--level-3 and a .tree__toggle-spacer so the label aligns with folder rows. This mini tree is interactive (data-tree-live).

File type icons

PimentCSS does not ship icons. In this doc we use Phosphor (ph-image, ph-file-pdf, etc.): pick one glyph per media type and reuse it for every matching extension.

File tree (interactive)

Example with folders and mixed files. Chevrons expand branches; clicking a name selects that row. Production apps should add keyboard support per the ARIA treeview pattern.

<ul class="tree" role="tree" data-tree-live="" aria-label="Files">
  <li role="treeitem" aria-expanded="false">
    <div class="tree__row"><button type="button" class="tree__toggle" aria-expanded="false" aria-controls="group-a" aria-label="Expand Assets">…</button><button type="button" class="tree__content">
        <span class="tree__icon" aria-hidden="true">…</span>
        <span class="tree__label">Assets</span>
      </button></div>
    <ul class="tree__group" id="group-a" role="group" hidden="">
      <li role="treeitem">
        <div class="tree__row tree__row--level-3"><span class="tree__toggle-spacer" aria-hidden="true"></span><button type="button" class="tree__content">…</button></div>
      </li>
    </ul>
  </li>
</ul>

JavaScript

import { wireAllTrees } from './tree-behavior';

wireAllTrees();

Class reference

Customize (Sass)

1. 01

   Tree spacing

   Adjust indentation and icon sizes. Override max-width on .tree in your app if filenames are long.
   variables

   @use "pimentcss-design-system" with (
     $tree-level-2-pl: 1rem,
     $tree-level-3-pl: 1rem,
     $tree-icon-size: 1.25rem
   );

2. 02

   Rebuild CSS

   Run after editing _tree.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps