Aqua Basis

The AqTreeMenu component can be used to represent a file system navigator displaying folders and files. An item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

<aq-tree-menu id="aq-tree-menu-1">
</aq-tree-menu>
<script>
  const treeMenu = document.getElementById('aq-tree-menu-1');
  treeMenu.options = [
    {
      id: 1,
      label: 'Level A',
      isOpen: true,
      isDisabled: false,
      childrenItems: [
        {
          id: '1-1',
          label: 'Level 1.1',
        },
        {
          id: '1-2',
          label: 'Level 1.2'
        },
      ]
    },
    {
      id: 2,
      label: 'Level B',
      isOpen: false,
    }
  ]
</script>

Props and Attributes

Prop / Attr	Type	Default	Description
`options`	`TreeMenuItem[]`	`[]`	List of tree menu items to render.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-actions-aqtreemenu--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Vanilla
`toggleItem`	Emitted when a tree item is toggled (expanded/collapsed).	`onToggleItem={handleToggle}`	`(toggleItem)="handleToggle($event)"`	`@toggleItem="handleToggle"`	`addEventListener('toggleItem', handler)`

Event Types

Event	React/Angular/Vue
`toggleItem`	`(e:CustomEvent<{clickedItem:{}, localOptions:[]}>)`

API

Method	Description	Params	Returns	React	Angular	Vue	Vanilla
`collapseAll`	Collapses all tree items in the menu.	–	`Promise<void>`	`await ref.current.collapseAll()`	`await treeMenuEl.collapseAll()`	`await ref.value.collapseAll()`	`await element.collapseAll()`
`getOptions`	Returns the current options of the tree menu.	–	`Promise<ITreeMenuItem[]>`	`await ref.current.getOptions()`	`await treeMenuEl.getOptions()`	`await ref.value.getOptions()`	`await element.getOptions()`
`setOptions`	Sets the options of the tree menu programmatically.	`options: ITreeMenuItem[]`	`Promise<void>`	`await ref.current.setOptions(data)`	`await treeMenuEl.setOptions(data)`	`await ref.value.setOptions(data)`	`await element.setOptions(data)`

In Frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<div>
	<aq-button id="button-tree-menu-collapse">Collapse all</aq-button>
	<aq-tree-menu id="aq-tree-menu-1">
	</aq-tree-menu>
</div>
<script>
  const treeMenu = document.getElementById('aq-tree-menu-1');
  treeMenu.options = [
    {
      id: 1,
      label: 'Level A',
      isOpen: true,
      isDisabled: false,
      childrenItems: [
        {
          id: '1-1',
          label: 'Level 1.1',
        },
        {
          id: '1-2',
          label: 'Level 1.2'
        },
      ]
    },
    {
      id: 2,
      label: 'Level B',
      isOpen: false,
    }
  ]
  
  // Component API
  const buttonTreeMenuCollapseAll = document.getElementById('button-tree-menu-collapse');
</script>

Vue

<script lang="ts">
import { AqTreeMenu, AqButton } from '@aqua-ds/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
    AqTreeMenu,
    AqButton,
  },
  setup() {
    const aqTreeMenuRef = ref();
    const options = ref([
      {
        idItem: 1,
        label: 'Level A',
        isOpen: true,
        isDisabled: false,
        childrenItems: [
          {
            idItem: '1-1',
            label: 'Level 1.1',
          },
          {
            idItem: '1-2',
            label: 'Level 1.2'
          },
        ]
      },
      {
        idItem: 2,
        label: 'Level B',
        isOpen: false,
      }
    ]);
  
	  // Component API
    const collapseAll = async() => {
      if(aqTreeMenuRef.value)
        await aqTreeMenuRef.value.collapseAll();
    }

    return {
      aqTreeMenuRef,
      options,
      collapseAll
    }
  }
})
</script>

<template>
    <div>
      <aq-tree-menu :options="options" ref="aqTreeMenuRef">
      </aq-tree-menu>
      <aq-button @click="collapseAll()" is-outline type="button">Collapse items</aq-button>
    </div>
</template>

React

import { AqTreeMenu, AqButton } from '@aqua-ds/react';
import { useRef, useState } from 'react';

export const TreeMenuSet = () => {
  const aqTreeMenuRef = useRef<any>(null);
  let [options] = useState([
    {
      idItem: 1,
      label: 'Level A',
      isOpen: true,
      isDisabled: false,
      childrenItems: [
        {
          idItem: '1-1',
          label: 'Level 1.1',
        },
        {
          idItem: '1-2',
          label: 'Level 1.2'
        },
      ]
    },
    {
      idItem: 2,
      label: 'Level B',
      isOpen: false,
    }
  ]);

  // Component API
  const collapseAll = async() => {
    if(aqTreeMenuRef.current !== null) {
      const treeMenuEl = aqTreeMenuRef.current;
      await treeMenuEl.collapseAll();
    }
  }

  return (
    <div>
      <AqTreeMenu options={options} onToggleItem={(e) => console.log(e)} ref={aqTreeMenuRef}>
      </AqTreeMenu>
      <AqButton onClick={async() => await collapseAll()} is-outline type="button">
	      Collapse items
      </AqButton>
    </div>
  );
};

Angular

// tree-menu-set.component.ts
import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AqButton, AqTreeMenu } from '@aqua-ds/angular';

@Component({
  selector: 'app-set-tree-menu',
  imports: [FormsModule, AqTreeMenu, AqButton],
  templateUrl: './set-tree-menu.component.html',
})
export class SetTreeMenuComponent {
  @ViewChild('treeMenuRef') treeMenuRef!: AqTreeMenu;

  options = [
    {
      idItem: 1,
      label: 'Level A',
      isOpen: true,
      isDisabled: false,
      childrenItems: [
        {
          idItem: '1-1',
          label: 'Level 1.1',
        },
        {
          idItem: '1-2',
          label: 'Level 1.2'
        },
      ]
    },
    {
      idItem: 2,
      label: 'Level B',
      isOpen: false,
    }
  ]
  
  // Component API
  collapseAll = async() => {   
    const treeMenuEl = this.treeMenuRef;
    await treeMenuEl.collapseAll();
  }
}

<!-- tree-menu-set.component.html -->
<div>
	<aq-button (click)="collapseAll()" is-outline type="button">Collapse items</aq-button>
	<aq-tree-menu
	    [options]="options"
	    #treeMenuRef
	>
	</aq-tree-menu>
</div>