How to configure navigation

We can devide navigation into 3 types: Top navigation, Left navigation and Developer navigation. First two navigations are located in application and Developer navigation is located in developer panel.

In this tutorial we will show you how to add menu item Product that can be seen only by Customer and how to configure dropdown menu Guests section that can be seen by not logged guests.

Configure navigation

1. Login into developer panel of application.

2. Navigate to Navigation menu item.

3. Drag and drop Menu item component from all components list to topNavigation component in navigation tree.

4. In dropped menu item component properties, for Menu link type property choose Application page and for Menu link page choose pageProduct.

New menu item

5. Drag and drop Authorization component to MenuitemProduct component.

6. In dropped authorization component properties, for Authorization type property choose Logged user can view and for Authorization roles choose Customer.

New authorization component

7. Drag and drop Menu item component from all components list to topNavigation component in navigation tree.

8. Name the droped menu item component MenuitemGuestSection and for Menu link type property choose No link.

9. Drag and drop Menu item component from all components list to MenuitemGuestSection component in navigation tree.

10. Name the droped menu item component MenuitemContactUs and for Menu link type property choose External link and in Menu link external field type external link.

11. Drag and drop Authorization component to MenuitemGuestSection component.

12. In dropped authorization component properties, for Authorization type property choose Logged user cannot view and for Authorization roles choose Administrator and Customer.

13. Drag and drop Authorization component to MenuitemGuestSection component.

14. In dropped authorization component properties, for Authorization type property choose Not logged user can view

Now your navigation tree should looks like:

Configure navigation final

15. Click on Save changes, go into your application and check out the results.