New to Kendo UI for Angular? Start a free 30-day trial

Routing

You can utilize the Angular Router and use the BottomNavigation as a navigational component.

To set the functionality, either:

  • Use the select event to navigate to the route that the BottomNavigation item represents, or
  • Use a template to add the routerLink directive to the item link. You could apply the k-bottom-nav-link CSS class to the link element in order to expand it to fit the whole BottomNavigation item.

The following example demonstrates how to use a template to render the routerLink directive. You could apply the k-bottom-nav-link CSS class to the link element in order to expand it to fit the whole BottomNavigation item.

Example
View Source
Edit In Stackblitz  
Change Theme:

Getting the Selected Item

The navigation logic could be executed in the select event handler of the BottomNavigation.

When you use the select event of the BottomNavigation, the event handler gets the selected item's (route) and passes it to the navigate method of the Router.

Example
View Source
Edit In Stackblitz  
Change Theme: