Um dos pontos altos de uma boa aplicação de admin é garantir que está bem posicionada e que sua navegação é simples. Para controlar a navegação no menu lateral do admin VTEX existem dois arquivos que serão úteis: o navigation.json e o routes.json.

O navigation é o arquivo que define as regras de navegação na barra lateral do admin VTEX. Com ele você pode construir desde um link mais simples, em que um clique leva para sua app, como construir menus mais complexos com submenus associados.

O routes é quem define as rotas e componentes react associados, da sua aplicação, qualquer componente que esteja mapeado para uma rota, deve ser declarado no routes, ainda que não esteja diretamente associado a um item de navegação no navigation.json.

1. Dentro da pasta admin/ criada no passo anterior, crie mais dois arquivos, o navigation.json e o routes.json

2. No navigation.json crie um objeto JSON com as propriedades section, titleId e path:

3. No routes.json atribua um component e um path para a navegação criada:

NOTA: O mapeamento de um navigation para uma route é feito através do path. O path deve divergir apenas por um /app/ no routes.json

4. Para finalizar, crie um componente simples de hello world com o mesmo nome que você deu para o component no routes.json

Link a aplicação (vtex link). O resultado deve ser o seguinte: