Extend SAPUI5 Navigation List Control (NavigationList) to allow Multi Levels

Extend SAPUI5 Navigation List Control: NavigationList control in SAPUI5 is useful for creating side menus. But, it only allows to levels down, which may not be enough in much cases.

In SideNavigationExtend blog post, we explained the reason for “only two levels” and we extended SideNavigation to make it multi levels. In that post we actually extended NavigationListItem control which is an aggregation of NavigationList.

In this post, by using the same logic, we will extend NavigationList control.

NavigationList has NavigationListItem as its aggregation. And NavigationListItem has NavigationListItem (itself) as aggregation. In the SAPUI5 API Reference it says this aggregation is 0..n. This means you can place as many NavigationListItem as you want inside a NavigationListItem, and it is true. But the strange thing here is the API Reference does not specify the level. How deep can we go by placing NavigationListItem inside NavigationListItem. This is not stated, and in fact the answer is two levels. We can only create two level menus with standard SideNavigation. (You will see the reason when you check the renderer functions of NavigationListItem : renderFirstLevelNavItem and renderSecondLevelNavItem.)

You can see the API Reference here.

I left the explanation part to the SideNavigationExtend post. Here only I put the Standard and Extended structure of NavigationListItem:

Standard NavigationList Control:

And this is the Extended NavigationList (with MessageToast alert for Last Level Tap event):

You can find the entire project in Github NavigationListExtend.

I hope it can help you in your projects. If you have any questions or comments, please do not hesitate to write.