New to Telerik UI for Blazor? Download Free 30-day trial

Breadcrumb - Navigation

  • Navigation.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming


Telerik UI for Blazor Breadcrumb gives you the ability to easily navigate between different pages in the application. It uses the NavigationManager from the framework to perform the navigation based on the value from the UrlField. The UrlField has a default value (Url), and if present in the model, it is getting used even if you do not define it explicitly.

If there is a template that adds anchors or uses a click event to navigate the user itself, this may lead to double navigation and errors, especially if your model has a field called Url. To avoid the double navigation, let the Telerik component do the navigation and remove the application-specific code that does it as well. The other thing you can do in that direction is to remove the URL setting (either rename the model field or point the UrlField to a non-existing field).

In case you need to dynamically generate the Breadcrumb paths based on the current application URL, subscribe to the LocationChanged event NavigationManager provides. That event allows you to track every location change and set a new Breadcrumb item.

This Breadcrumb Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.