Routing

You can utilize the Angular Router service 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. To expand the link element to fit the whole BottomNavigation item, apply the k-bottom-nav-link CSS class to it.

Generating the RouterLink Directive

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

Getting the Selected Item

You can execute the navigation logic in the select event handler of the BottomNavigation.

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

Suggested Links

• API Reference of the BottomNavigation Component