> For the complete documentation index, see [llms.txt](https://e-plus-agency.gitbook.io/plus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/super-menu.md).

# Super Menu

📢 Use this project, [contribute](https://github.com/agencia-e-plus/storage-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Super Menu

Aplicação para renderização da árvore de categorias e/ou construção de menus personalizados

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

### Configuração

Adicione o Super Menu às dependências da loja

```json
// manifest.json

"dependencies": {
  "{vendor}.super-menu": "1.x"
}
```

Utilize o bloco `super-menu` com as propriedades a seguir

| Nome do bloco | Descrição                                            |
| ------------- | ---------------------------------------------------- |
| `super-menu`  | Bloco responsável por renderir o menu e seu contexto |

#### Propriedades do bloco `super-menu`

| Nome                   | Tipo             | Descrição                                                                                                                                                                                                                      | Valor padrão   |
| ---------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `withCategoryTree`     | `boolean`        | Define se a árvore de categorias deve ser carregada ou não. Se `false`, a requisição à API da Vtex **não** é realizada.                                                                                                        | `true`         |
| `maxDepth`             | `number`         | Define a profundidade máxima (quantidade de níveis) do menu.                                                                                                                                                                   | `2`            |
| `maxDepartments`       | `number`         | Define a quantidade máxima de departamentos (nível 1) a ser exibida. Para não limitar, use `0`.                                                                                                                                | `0`            |
| `maxCategories`        | `number`         | Define a quantidade máxima de categorias (nível 2 ou +) a ser exibida. Para não limitar, use `0`.                                                                                                                              | `0`            |
| `departmentSortMethod` | `SortMethodEnum` | Método de ordenação dos departamentos (Veja a documentação de `SortMethodEnum` abaixo)                                                                                                                                         | `DEFAULT`      |
| `categorySortMethod`   | `SortMethodEnum` | Método de ordenação das categorias (Veja a documentação de `SortMethodEnum` abaixo)                                                                                                                                            | `ALPHABETICAL` |
| `customItems`          | `CustomItem[]`   | Cria novos itens no menu e/ou edita os itens já existentes na árvore de categorias da loja. Basta informar o ID da categoria ou criar o próprio ID. Veja a documentação `CustomItem` para entender o que pode ser configurado. | `[]`           |

**Valores para `SortMethodEnum`**

| Nome       | Valor          | Descrição                                                                                                                       |
| ---------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| Padrão     | `DEFAULT`      | Ordena de acordo com a ordem em que os itens estão dispostos no `customItems` ou segue a ordem natural da árvore de categorias. |
| Alfabético | `ALPHABETICAL` | Ordena em ordem alfabética                                                                                                      |

**Objeto `CustomItem`**

| Nome        | Tipo           | Descrição                                                                                                                                                                                                                                                                                       | Valor padrão |
| ----------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `id`\*      | `string`       | (**Obrigatório**) ID da categoria, caso a intenção seja alterar um item da árvore de categorias da loja. Porém se a intenção for criar um novo item, basta inventar um ID qualquer (usar somente **letras minúsculas**, **traços** e **números**, pois este ID será usado como classe do item). | `undefined`  |
| `name`      | `string`       | Nome que será exibido no item (também chamado de**label**).                                                                                                                                                                                                                                     | `''`         |
| `href`      | `string`       | URL de redirecionamento do item                                                                                                                                                                                                                                                                 | `./`         |
| `children`  | `CustomItem[]` | Possíveis fílhos do item (definição recursiva).                                                                                                                                                                                                                                                 | `[]`         |
| `highlight` | `boolean`      | Se `true`, insere um modificador na classe do item para que este possa ser estilizado com destaque.                                                                                                                                                                                             | `false`      |
| `hidden`    | `boolean`      | Se `treu`, o item não será renderizado. É útil para o lojista, pois este poderá esconder o item por conta própria.                                                                                                                                                                              | `false`      |
| `text`      | `string`       | Texto explicativo do item. Geralmente usado para descrever a categoria em questão, porém pode ser usado sem problemas com itens customizados que não existem na árvore de categoria.                                                                                                            | `undefined`  |
| `images`    | `string[]`     | URL da imagem                                                                                                                                                                                                                                                                                   | `undefined`  |
| `icon`      | `object`       | URL do ícone                                                                                                                                                                                                                                                                                    | `undefined`  |

**Exemplo de uso**

```json
"super-menu#": {
	"title": "Menu",
	"props": {
		"withCategoryTree": true,
		"maxDepth": 2,
		"maxDepartments": 0,
		"maxCategories": 0,
		"departmentSortMethod": "DEFAULT",
		"categorySortMethod": "ALPHABETICAL",
		"customItems": [
			{
				"id": "8",
				"images": ["assets/images/header/menu/imagens/imagem-menu.png"],
				"icon": {
					"src": "assets/images/header/menu/icons/informatica.png"
				},
			},
			{
				"id": "16",
				"name": "Xuxa só para baixinhos",
				"images": ["assets/images/header/menu/imagens/imagem-menu.png"],
				"icon": {
					"src": "assets/images/header/menu/icons/informatica.png"
				},
				"children": [
					{ "id": "27", "name": "Xuxa só para baixinhos 1.1" },
					{ "id": "28", "name": "Xuxa só para baixinhos 1.2" }
				],
				"text": "Olá, Marilene",
				"highlight": true
			}
		],
		"blockClass": ["category-menu", "category-menu-select-departments"]
	}
},
```