Go to homepage

Projects /


Multi-level directory of editable items.

View Demo


Compatible CSS frameworks:

How to

The Tree component is a multi-level directory of items.

In its default version, the items' content is not editable. Each item is either a link or a group. Clicking on the group will reveal its content.

To make the content editable, add the data-tree-content-editable="true" data attribute to the .tree element. In the --content-editable variation, to expand a node, you need to click on the arrow icon. To edit the items' content, double click on them.

Indentation Levels #

Use the $tree-indentation-levels variable to set the tree indentation levels:

$tree-indentation-levels: 3;

Icons #

There are two icon types: 1. Arrow icons, and 2. Label icons.

The first type indicates, with its rotation, whether a node is expanded or not. The second type is the icon showing the node type (e.g., a folder icon for the group, an image icon for a link to a file, etc).

The custom properties declared in the SCSS file of the component control the icon size. The color is controlled by the color utility classes applied to the icons.

Editable Content #

When using the --content-editable variation, the labelEdited custom event is emitted each time the label is modified. You can use this custom event to keep track of the updated labels:

var tree = document.getElementsByClassName('js-tree')[0];
tree.addEventListener('labelEdited', function(event) {
  // a label value has been modified
  // event.detail is the .tree__label element that was edited

Keyboard Navigation #

Default version:

Action Hotkey
Move between nodes tab key or up/down keys
Open node group Enter key or right/left keys

Content-editable version:

Action Hotkey
Move between nodes up/down keys
Open node group right/left keys
Edit node content Enter key or double-click


Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.