lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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 1Item 2Item 3Item 3-1Item 3-2Item 3-3Item 3-3-1Item 3-3-2Item 3-3-3Item 3-4Item 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 1Item 2Item 3Item 3-1Item 3-2Item 3-3Item 3-3-1Item 3-3-2Item 3-3-3Item 3-4Item 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 1Item 2Item 3Item 3-1Item 3-2Item 3-3Item 3-3-1Item 3-3-2Item 3-3-3Item 3-4Item 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.jsclientfile.jsshare.txtconfig.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>
Item 1Item 2Item 3Item 3-1Item 3-2Item 3-3Item 3-3-1Item 3-3-2Item 3-3-3Item 3-4Item 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 1Item 2Item 3Item 3-1Item 3-2Item 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

NameTypesDescription
interaction'auto'indicate if a control is expanded or collapsed
selectable'multi' | 'single'determine if tree items can be selected

Attributes

NameTypesDescription
interaction'auto'indicate if a control is expanded or collapsed
selectable'multi' | 'single'determine if tree items can be selected

CSS Properties

NameTypesDescription
--background

Slots

NameTypesDescription
defaulttree items