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:

imageimage

  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"
}

imageimage

Any questions?

See the answersheet for this step or join us on our office hours


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