One of the highlights of a good admin application is to ensure that it is well-positioned and that navigation is simple. To control navigation in the VTEX admin side menu there are two files that will be useful: navigation.json androutes.json.

Navigation is the file that defines the navigation rules in the VTEX admin sidebar. With it, you can build from a simpler link, in which a click takes you to your app, how to build more complex menus with associated submenus.

The routes define the routes and associated react components, from your application, any component that is mapped to a route must be declared in the routes, even if it is not directly associated with a navigation item in navigation.json.

1. Within the /admin/folder created in the previous step, create two more files,navigation.json and routes.json:

2. In navigation.json create a JSON object with the properties section, titleId and path:

3. In routes.json assign a component and path to the created navigation:

NOTE: The mapping from a navigation to a route is done through the path. The path must diverge only by a /app/ in routes.json

4. Finally, create a simple hello world component with the same name that you gave to component in routes.json:

Link the application (vtex link). The result should be as follows: