Tree

The tree component enables hierarchical data organization, offering a collapsible and expandable tree structure. Users can easily navigate through parent and child nodes, expanding or collapsing branches as needed. The component supports for the highlighting of selected nodes.

Example

Item 1

Item 2

Item 3Item 3-1

Item 3-2

Item 3-3Item 3-3-1

Item 3-3-2

Item 3-3-3

Item 3-4

Item 3-5

code

<script type="module">
  import '@blueprintui/components/include/tree.js';
</script>

<bp-tree interaction="auto">
  <bp-tree-item>Item 1</bp-tree-item>
  <bp-tree-item>Item 2</bp-tree-item>
  <bp-tree-item expanded>
    Item 3
    <bp-tree-item>Item 3-1</bp-tree-item>
    <bp-tree-item>Item 3-2</bp-tree-item>
    <bp-tree-item expanded>
      Item 3-3
      <bp-tree-item>Item 3-3-1</bp-tree-item>
      <bp-tree-item>Item 3-3-2</bp-tree-item>
      <bp-tree-item>Item 3-3-3</bp-tree-item>
    </bp-tree-item>
    <bp-tree-item>Item 3-4</bp-tree-item>
    <bp-tree-item>Item 3-5</bp-tree-item>
  </bp-tree-item>
</bp-tree>

Multi Selectable

Item 1

Item 2

Item 3Item 3-1

Item 3-2

Item 3-3Item 3-3-1

Item 3-3-2

Item 3-3-3

Item 3-4

Item 3-5

code

<script type="module">
  import '@blueprintui/components/include/tree.js';
</script>

<bp-tree selectable="multi" interaction="auto">
  <bp-tree-item>Item 1</bp-tree-item>
  <bp-tree-item selected>Item 2</bp-tree-item>
  <bp-tree-item expanded>
    Item 3
    <bp-tree-item>Item 3-1</bp-tree-item>
    <bp-tree-item>Item 3-2</bp-tree-item>
    <bp-tree-item expanded>
      Item 3-3
      <bp-tree-item>Item 3-3-1</bp-tree-item>
      <bp-tree-item>Item 3-3-2</bp-tree-item>
      <bp-tree-item>Item 3-3-3</bp-tree-item>
    </bp-tree-item>
    <bp-tree-item>Item 3-4</bp-tree-item>
    <bp-tree-item>Item 3-5</bp-tree-item>
  </bp-tree-item>
</bp-tree>

Multiple tree items can be selected when setting selectable="multi" on the tree element. Use the selectable attribute/property to mark a tree item as selected.

Selectable

Item 1

Item 2

Item 3Item 3-1

Item 3-2

Item 3-3Item 3-3-1

Item 3-3-2

Item 3-3-3

Item 3-4

Item 3-5

code

<script type="module">
  import '@blueprintui/components/include/tree.js';
</script>

<bp-tree selectable="single" interaction="auto">
  <bp-tree-item selected>Item 1</bp-tree-item>
  <bp-tree-item>Item 2</bp-tree-item>
  <bp-tree-item expanded>
    Item 3
    <bp-tree-item>Item 3-1</bp-tree-item>
    <bp-tree-item>Item 3-2</bp-tree-item>
    <bp-tree-item expanded>
      Item 3-3
      <bp-tree-item>Item 3-3-1</bp-tree-item>
      <bp-tree-item>Item 3-3-2</bp-tree-item>
      <bp-tree-item>Item 3-3-3</bp-tree-item>
    </bp-tree-item>
    <bp-tree-item>Item 3-4</bp-tree-item>
    <bp-tree-item>Item 3-5</bp-tree-item>
  </bp-tree-item>
</bp-tree>

Multiple tree items can be selected when setting selectable="single" on the tree element. Use the selectable attribute/property to mark a tree item as selected.

Icons

serverfile.js

clientfile.js

share.txt

config.json

code

<script type="module">
  import '@blueprintui/components/include/tree.js';
  import '@blueprintui/icons/shapes/file-settings.js';
  import '@blueprintui/icons/shapes/file-share-2.js';
  import '@blueprintui/icons/shapes/folder.js';
  import '@blueprintui/icons/shapes/file.js';
</script>

<bp-tree interaction="auto">
  <bp-tree-item>
    <bp-icon shape="folder" size="sm"></bp-icon> server
    <bp-tree-item><bp-icon shape="file" size="sm"></bp-icon> file.js</bp-tree-item>
  </bp-tree-item>
  <bp-tree-item expanded>
    <bp-icon shape="folder" size="sm"></bp-icon> client
    <bp-tree-item><bp-icon shape="file" size="sm"></bp-icon> file.js</bp-tree-item>
    <bp-tree-item><bp-icon shape="file-share-2" size="sm"></bp-icon> share.txt</bp-tree-item>
    <bp-tree-item><bp-icon shape="file-settings" size="sm"></bp-icon> config.json</bp-tree-item>
  </bp-tree-item>
</bp-tree>

Links

Item 1

Item 2

Item 3

Item 3-1

Item 3-2

Item 3-3Item 3-3-1

Item 3-3-2

Item 3-3-3

Item 3-4

Item 3-5

code

<script type="module">
  import '@blueprintui/components/include/tree.js';
</script>

<bp-tree>
  <bp-tree-item>Item 1</bp-tree-item>
  <bp-tree-item>Item 2</bp-tree-item>
  <bp-tree-item expanded>
    <a href="https://coryrylan.com">Item 3</a>
    <bp-tree-item><a href="#">Item 3-1</a></bp-tree-item>
    <bp-tree-item>Item 3-2</bp-tree-item>
    <bp-tree-item expanded>
      Item 3-3
      <bp-tree-item>Item 3-3-1</bp-tree-item>
      <bp-tree-item>Item 3-3-2</bp-tree-item>
      <bp-tree-item>Item 3-3-3</bp-tree-item>
    </bp-tree-item>
    <bp-tree-item>Item 3-4</bp-tree-item>
    <bp-tree-item>Item 3-5</bp-tree-item>
  </bp-tree-item>
</bp-tree>

Stateless

Item 1

Item 2

Item 3Item 3-1

Item 3-2

Item 3-3

code

<bp-tree>
  <bp-tree-item>Item 1</bp-tree-item>
  <bp-tree-item>Item 2</bp-tree-item>
  <bp-tree-item id="tree-item-group">
    Item 3
    <bp-tree-item>Item 3-1</bp-tree-item>
    <bp-tree-item>Item 3-2</bp-tree-item>
    <bp-tree-item>Item 3-3</bp-tree-item>
  </bp-tree-item>
</bp-tree>
<script type="module">
  import '@blueprintui/components/include/tree.js';
  const group = document.querySelector('#tree-item-group');
  group.addEventListener('open', () => (group.expanded = true));
  group.addEventListener('close', () => (group.expanded = false));
</script>

By default the tree component is stateless. To have full control of the state omit the interaction="auto" attribute.

Install

NPM

// npm package
import '@blueprintui/components/include/tree.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/tree.js/+esm';
</script>

Accessibility

Ensure proper color contrast for text and icons to accommodate users with visual impairments.
Include descriptive labels and tooltips for nodes to assist screen readers in conveying information accurately.

bp-tree

Properties

Name	Types	Description
`accessor`		determine if tree items can be selected
`interaction`	`'auto'`
`selectable`	`'multi' \| 'single'`

Attributes

Name	Types	Description
`accessor`		determine if tree items can be selected

CSS Properties

Name	Types	Description
`--background`

Slots

Name	Types	Description
`default`		tree items