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
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
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
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
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
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
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 |
|---|---|---|
interaction | 'auto' | indicate if a control is expanded or collapsed |
selectable | 'multi' | 'single' | determine if tree items can be selected |
Attributes
| Name | Types | Description |
|---|---|---|
interaction | 'auto' | indicate if a control is expanded or collapsed |
selectable | 'multi' | 'single' | determine if tree items can be selected |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background |
Slots
| Name | Types | Description |
|---|---|---|
default | tree items |