---
title: Tree
description: O componente Tree é um recurso essencial na criação de páginas web, permitindo a inserção de uma árvore de opções em seu template. Essa árvore é composta por elementos visuais que oferecem uma organização hierárquica para diferentes partes do seu…
url: "https://gaianocode.com.br/docs/tree/"
updated: "2024-02-06"
category: Pages / Page Componentes / Tree
---

# Tree

O componente Tree é um recurso essencial na criação de páginas web, permitindo a inserção de uma árvore de opções em seu template. Essa árvore é composta por elementos visuais que oferecem uma organização hierárquica para diferentes partes do seu conteúdo. Com a ferramenta Tree, você tem a flexibilidade de adicionar, posicionar e estruturar itens e subitens de forma estratégica em suas páginas web, proporcionando uma navegação clara e hierarquizada aos usuários. A capacidade de editar e formatar esses elementos conforme necessário torna essa funcionalidade valiosa para personalizar a apresentação e o design do seu projeto de acordo com suas preferências e requisitos específicos. Isso permite criar uma experiência de usuário mais intuitiva e orientada, destacando a hierarquia das informações por meio de uma representação visual.

![](https://gaianocode.com.br/wp-content/uploads/2024/01/tree-1024x365.png)

## Localização

O componente Tree, se encontra dentro de WebCompoents conforme ilustrado abaixo:

![](https://gaianocode.com.br/wp-content/uploads/2024/02/tree2.png)

## Propriedades

### Basic

As propriedades básicas do componente Tree incluem o seu tipo, contendo como única opção Tree, além do conteúdo do texto que estará contido nele.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/tree3.png)

### Params

O componente Tree possui propriedades de parâmetros que incluem items, class e box-size. A opção items refere-se à configuração da árvore de opções, desde os itens primários até os seus filhos, configurando seus identificadores, nomes e ícones. Por outro lado, o parâmetro box-size define o tamanho da árvore de opções, enquanto a propriedade class corresponde à classe atribuída à mesma.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/tree4.png)