Improving Navigation

Enhancing Navigation

Introduction

Navigation.json has a series of features that can improve the relevance and navigation of your application, in this step we will learn how to define a title message and create keywords.

Activity

  1. In the previous step we used titleId: ʻadmin-example.navigation.label`. To assign a textual value to this key, we need to write the corresponding value in the messages folder, in the three language files:

/messages/pt.json

{
  "admin-example.navigation.label": "Treinamento de IO"
}

/messages/en.json

{
  "admin-example.navigation.label": "IO Training"
}

/messages/es.json

{
  "admin-example.navigation.label": "Entrenamiento de IO"
}

That done, we can now see a translatable message for the menu we created:

image

  1. Add keywords to make your application search easier:

/admin/navigation.json

{
  ...
+ "searchKeyWordsHelpers": "admin-example.navigation.search.kws"
}
  1. Similarly, create the messages for the keywords, separated by commas:

/messages/pt.json

{
  "admin-example.navigation.label": "Treinamento de IO",
+ "admin-example.navigation.search.kws": "mock, test, treinamento, io"
}

/messages/en.json

{
  "admin-example.navigation.label": "IO Training",
+ "admin-example.navigation.search.kws": "mock, test, training, io"
}

/messages/es.json

{
  "admin-example.navigation.label": "Entrenamiento de IO",
+ "admin-example.navigation.search.kws": "mock, test, entrenamiento, io"
}

image

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)


Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue


Next step