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
Displays hierarchical data in an expandable tree structure.
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
Shows tree with multi-selection support.
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
Demonstrates tree with single-selection support.
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
Shows tree nodes with custom 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
Demonstrates tree with clickable link nodes.
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
Shows stateless tree implementation without persistence.
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' | Controls whether the component automatically manages item expansion and selection based on user interactions |
selectable | 'multi' | 'single' | Determines the selection mode for tree items, allowing single or multiple selections |
Attributes
| Name | Types | Description |
|---|---|---|
interaction | 'auto' | Controls whether the component automatically manages item expansion and selection based on user interactions |
selectable | 'multi' | 'single' | Determines the selection mode for tree items, allowing single or multiple selections |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background |
Slots
| Name | Types | Description |
|---|---|---|
default | tree items |