Tree

Docs
API

Basic example

Tree component with the default settings. Check the console log for the triggered events.

Fruits Citrus Fruits Orange

Lemon

Grapefruit

Berries Strawberry

Blueberry

Raspberry

Tropical Fruits Mango

Pineapple

Papaya

Vegetables Leafy Greens Spinach

Lettuce

Kale

Root Vegetables Carrot

Beetroot

Radish

Nightshades Tomato

Eggplant

Bell Pepper

Controls

expandMode

hideArrows

indent

indentGuides

multiSelect

HTML
JavaScript

1
<vscode-tree id="tree-basic-example">
2
  <vscode-tree-item>
3
    Fruits
4
    <vscode-tree-item>
5
      Citrus Fruits
6
      <vscode-tree-item>Orange</vscode-tree-item>
7
      <vscode-tree-item>Lemon</vscode-tree-item>
8
      <vscode-tree-item>Grapefruit</vscode-tree-item>
9
    </vscode-tree-item>
10
    <vscode-tree-item>
11
      Berries
12
      <vscode-tree-item>Strawberry</vscode-tree-item>
13
      <vscode-tree-item>Blueberry</vscode-tree-item>
14
      <vscode-tree-item>Raspberry</vscode-tree-item>
15
    </vscode-tree-item>
16
    <vscode-tree-item>
17
      Tropical Fruits
18
      <vscode-tree-item>Mango</vscode-tree-item>
19
      <vscode-tree-item>Pineapple</vscode-tree-item>
20
      <vscode-tree-item>Papaya</vscode-tree-item>
21
    </vscode-tree-item>
22
  </vscode-tree-item>
23
  <vscode-tree-item>
24
    Vegetables
25
    <vscode-tree-item>
26
      Leafy Greens
27
      <vscode-tree-item>Spinach</vscode-tree-item>
28
      <vscode-tree-item>Lettuce</vscode-tree-item>
29
      <vscode-tree-item>Kale</vscode-tree-item>
30
    </vscode-tree-item>
31
    <vscode-tree-item>
32
      Root Vegetables
33
      <vscode-tree-item>Carrot</vscode-tree-item>
34
      <vscode-tree-item>Beetroot</vscode-tree-item>
35
      <vscode-tree-item>Radish</vscode-tree-item>
36
    </vscode-tree-item>
37
    <vscode-tree-item>
38
      Nightshades
39
      <vscode-tree-item>Tomato</vscode-tree-item>
40
      <vscode-tree-item>Eggplant</vscode-tree-item>
41
      <vscode-tree-item>Bell Pepper</vscode-tree-item>
42
    </vscode-tree-item>
43
  </vscode-tree-item>
44
</vscode-tree>

1
const tree = document.querySelector("#tree-basic-example");
2
tree.addEventListener("vsc-tree-select", (event) => {
3
  console.log(event);
4
});

Icons

Icons can be added using named slots. Any valid HTML content can be used as an icon.

Icon area: The display area for icons is limited to 16×16 pixels. Content that exceeds this size will be clipped.
Available slots:
- icon-branch — shown when a branch item is collapsed.
- icon-branch-opened — shown when a branch item is expanded.
- icon-leaf — shown for leaf items

The visibility of each icon depends on the state of the corresponding tree item.

Codicons

To use the icons, the codicons.css file must be included in the page:

1
<link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet">

Note the required id on the link element! To use web fonts in web components, the component needs to include the font stylesheet in addition to the page. This id serves as a lookup so the icon component can automatically create and insert it’s own link tag.

vscode-tree helpers.test.ts

helpers.ts

index.ts

tree-context.ts

vscode-tree.styles.ts

vscode-tree.test.ts

vscode-tree.ts

HTML

1
<vscode-tree>
2
  <vscode-tree-item>
3
    <vscode-icon name="folder" slot="icon-branch"></vscode-icon>
4
    <vscode-icon
5
      name="folder-opened"
6
      slot="icon-branch-opened"
7
    ></vscode-icon>
8
    vscode-tree
9
    <vscode-tree-item>
10
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
11
      helpers.test.ts
12
    </vscode-tree-item>
13
    <vscode-tree-item>
14
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>helpers.ts
15
    </vscode-tree-item>
16
    <vscode-tree-item>
17
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>index.ts
18
    </vscode-tree-item>
19
    <vscode-tree-item>
20
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
21
      tree-context.ts
22
    </vscode-tree-item>
23
    <vscode-tree-item>
24
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
25
      vscode-tree.styles.ts
26
    </vscode-tree-item>
27
    <vscode-tree-item>
28
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
29
      vscode-tree.test.ts
30
    </vscode-tree-item>
31
    <vscode-tree-item>
32
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>vscode-tree.ts
33
    </vscode-tree-item>
34
  </vscode-tree-item>
35
</vscode-tree>

Custom icons

Another example with <img> tags.

vscode-tree

helpers.test.ts

helpers.ts

index.ts

tree-context.ts

vscode-tree.styles.ts

vscode-tree.test.ts

vscode-tree.ts

HTML
CSS

1
<vscode-tree>
2
  <vscode-tree-item open>
3
    <img src="/material-icons/folder.svg" slot="icon-branch" />
4
    <img src="/material-icons/folder-open.svg" slot="icon-branch-opened" />
5
    vscode-tree
6
    <vscode-tree-item>
7
      <img src="/material-icons/test-ts.svg" slot="icon-leaf" />
8
      helpers.test.ts
9
    </vscode-tree-item>
10
    <vscode-tree-item>
11
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
12
      helpers.ts
13
    </vscode-tree-item>
14
    <vscode-tree-item>
15
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
16
      index.ts
17
    </vscode-tree-item>
18
    <vscode-tree-item>
19
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
20
      tree-context.ts
21
    </vscode-tree-item>
22
    <vscode-tree-item>
23
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
24
      vscode-tree.styles.ts
25
    </vscode-tree-item>
26
    <vscode-tree-item>
27
      <img src="/material-icons/test-ts.svg" slot="icon-leaf" />
28
      vscode-tree.test.ts
29
    </vscode-tree-item>
30
    <vscode-tree-item>
31
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
32
      vscode-tree.ts
33
    </vscode-tree-item>
34
  </vscode-tree-item>
35
</vscode-tree>

1
img[slot="icon-branch"],
2
img[slot="icon-branch-opened"],
3
img[slot="icon-leaf"] {
4
  display: block;
5
  height: 16px;
6
  width: 16px;
7
}

Flat tree

The Tree component can also be used to display lists.

bump distro

Update milestone

env – tweak shell resolve experience on startup

Merge pull request #107126 from Timmmm/atomic_tabs

Simplify changes from #108193

HTML

1
<vscode-tree>
2
  <vscode-tree-item>
3
    <vscode-icon name="git-commit" slot="icon-leaf"></vscode-icon>
4
    bump distro
5
  </vscode-tree-item>
6
  <vscode-tree-item>
7
    <vscode-icon name="git-commit" slot="icon-leaf"></vscode-icon>
8
    Update milestone
9
  </vscode-tree-item>
10
  <vscode-tree-item>
11
    <vscode-icon name="git-commit" slot="icon-leaf"></vscode-icon>
12
    env – tweak shell resolve experience on startup
13
  </vscode-tree-item>
14
  <vscode-tree-item>
15
    <vscode-icon name="git-commit" slot="icon-leaf"></vscode-icon>
16
    Merge pull request #107126 from Timmmm/atomic_tabs
17
  </vscode-tree-item>
18
  <vscode-tree-item>
19
    <vscode-icon name="git-commit" slot="icon-leaf"></vscode-icon>
20
    Simplify changes from #108193
21
  </vscode-tree-item>
22
</vscode-tree>

Rich content

You can place any HTML content inside a <vscode-tree-item> component.

tsconfig.json

Cannot find type definition file for 'mocha'.

[Ln 1, Col 1]

The file is in the program because:

Entry point of type library 'mocha' specified in compilerOptions

Cannot find type definition file for 'user-agent-data-types'.

[Ln 1, Col 1]

The file is in the program because:

Entry point of type library 'user-agent-data-types' specified in compilerOptions

1
<vscode-tree>
2
  <vscode-tree-item open>
3
    <div class="file">
4
      <vscode-icon name="file"></vscode-icon>
5
      <div class="filename">tsconfig.json</div>
6
      <vscode-badge variant="counter">2</vscode-badge>
7
    </div>
8
    <vscode-tree-item>
9
      <div class="message">
10
        <div class="actions">
11
          <vscode-icon name="error"></vscode-icon>
12
        </div>
13
        <div class="message-details">
14
          <div class="message-line">
15
            <span class="message-raw"
16
              >Cannot find type definition file for 'mocha'.</span
17
            >
18
            <div class="message-error-code">ts</div>
19
            <div class="message-location">[Ln 1, Col 1]</div>
20
            <div class="action-bar">
21
              <vscode-toolbar-button
22
                icon="chevron-down"
23
                class="toggle-button open"></vscode-toolbar-button>
24
            </div>
25
          </div>
26
          <div class="toggleable open">
27
            <div class="message-line">
28
              <span class="message-raw"
29
                >&nbsp;&nbsp;The file is in the program because:</span
30
              >
31
            </div>
32
            <div class="message-line">
33
              <span class="message-raw"
34
                >&nbsp;&nbsp;&nbsp;&nbsp;Entry point of type library 'mocha'
35
                specified in compilerOptions</span
36
              >
37
            </div>
38
          </div>
39
        </div>
40
      </div>
41
    </vscode-tree-item>
42
    <vscode-tree-item>
43
      <div class="message">
44
        <div class="actions">
45
          <vscode-icon name="error"></vscode-icon>
46
        </div>
47
        <div class="message-details">
48
          <div class="message-line">
49
            <span class="message-raw"
50
              >Cannot find type definition file for 'user-agent-data-types'.</span
51
            >
52
            <div class="message-error-code">ts</div>
53
            <div class="message-location">[Ln 1, Col 1]</div>
54
            <div class="action-bar">
55
              <vscode-toolbar-button
56
                icon="chevron-down"
57
                class="toggle-button open"></vscode-toolbar-button>
58
            </div>
59
          </div>
60
          <div class="toggleable open">
61
            <div class="message-line">
62
              <span class="message-raw"
63
                >&nbsp;&nbsp;The file is in the program because:</span
64
              >
65
            </div>
66
            <div class="message-line">
67
              <span class="message-raw"
68
                >&nbsp;&nbsp;&nbsp;&nbsp;Entry point of type library
69
                'user-agent-data-types' specified in compilerOptions</span
70
              >
71
            </div>
72
          </div>
73
        </div>
74
      </div>
75
    </vscode-tree-item>
76
  </vscode-tree-item>
77
</vscode-tree>

1
.file {
2
  align-items: center;
3
  display: flex;
4
}
5

6
.file vscode-icon {
7
  margin-right: 6px;
8
}
9

10
.filename {
11
  display: block;
12
}
13

14
vscode-badge[variant="counter"] {
15
  display: block;
16
  margin-left: 10px;
17
}
18

19
.message {
20
  display: flex;
21
}
22

23
.actions {
24
  align-items: center;
25
  display: flex;
26
  height: 22px;
27
  margin: 0 6px;
28
}
29

30
.actions vscode-icon {
31
  color: var(--vscode-problemsErrorIcon-foreground);
32
}
33

34
.message-details {
35
  overflow: hidden;
36
}
37

38
.toggleable {
39
  display: none;
40
}
41

42
.toggleable.open {
43
  display: block;
44
}
45

46
.message-line {
47
  display: flex;
48
  white-space: nowrap;
49
}
50

51
.message-raw {
52
  display: block;
53
  overflow: hidden;
54
  text-overflow: ellipsis;
55
  white-space: nowrap;
56
}
57

58
.message-error-code {
59
  margin-left: 6px;
60
  opacity: 0.7;
61
}
62

63
.message-location {
64
  margin-left: 6px;
65
  opacity: 0.7;
66
}
67

68
.action-bar {
69
  margin-left: 6px;
70
}
71

72
.action-bar vscode-toolbar-button {
73
  display: block;
74
}
75

76
.action-bar vscode-toolbar-button.open {
77
  transform: rotate(180deg);
78
}

1
const toggleButtons = document.querySelectorAll(".toggle-button");
2

3
toggleButtons.forEach((bt) => {
4
  bt.addEventListener("click", () => {
5
    const message = bt.closest(".message");
6
    const toggleableSection = message.querySelector(".toggleable");
7

8
    bt.classList.toggle("open");
9
    toggleableSection.classList.toggle("open");
10
  });
11
});