Breadcrumb for Navigation

The Breadcrumb can be used to navigate between different pages in the application. It can generate the needed links for you through its UrlField when data binding.

In some cases you might prefer to dynamically generate the breadcrumbs based on the current application Url. For this scenario you can use the NavigationManager that the component supports and subscribe to its LocationChanged event. Thus, you can set new Breadcrumb items on every location change.

To use the Breadcrumb and dynamically generate its items:

• Add the Breadcrumb to your application.

  • You may want to add it in the MainLayout.razor outside of the @Body, for example, in the main container of your app.

• Inject a NavigationManager instance in the file where you want to build the breadcrumbs.

• Handle the LocationChanged event of the NavigationManager.

• Dynamically generate the Breadcrumb items based on the Url provided by the Location field of the LocationChangedEventArgs.

Here is an example for such a configuration in our public repository - SubScribeToLocationChanged.

Notes

• The UrlField has a default value (Url) and that will be used if present in the model even if you do not define it explicitly.

• The component uses the NavigationManager from the framework to perform the navigation based on the value from the UrlField.

  • If you have a template that adds anchors, or use a click event to navigate the user yourself, this may lead to double navigation and errors, especially if your model has a field called Url. To avoid such problems, either let the Telerik component do the navigation and remove the application-specific code that does it as well, or remove the URL setting (either rename the model field, or point the UrlField to a non-existing field).

See Also

• Live Demo: Breadcrumb Navigation