The Blazor Menu component builds a navigation for you based on your texts, URLs, images and data. The Menu works in both Blazor WebAssembly (WASM) and server-side Blazor apps and provides flexible data binding and automatic fly-out menus for child items let you show your app’s navigation hierarchy to your user.
A menu item model provides a few fields so the menu can render the desired text and link for you. Hierarchy is expressed either through flat binding and parent-child IDs, or by creating nested menu items collections in a recursive hierarchical data source. You can use your own field names and custom models, and point the menu to the right fields and it will do the rest.
You can decorate menu items with icons and images to help your users navigate and find the page they are looking for. We provide a set of font icons for your use, and you can also use your own font icons, raster images or even sprites.
The Telerik Blazor menu can be both horizontal, or vertical, so it can match the layout you need – a horizontal one in your app header, or a vertical menu in the left-hand side navigation – just set a simple parameter.
If you want to implement more complex logic for your menus (like highlighting the current page, or rendering something more complex than links and text, or open certain links in a new tab), the Telerik Menu component has you covered – the item template lets you put HTML and components in the menu item as your business logic dictates.
See the samples for menu templates
Some of your items may not have URLs at all and may not be links, but you still want your app to react when the user clicks them. Or, you may want to navigate the user only based on certain condition or logic that you have at runtime. The Telerik Blazor Menu helps you by exposing a click event for the items that you can respond to.
See the Menu Click event handling demo.
The Telerik Blazor Menu has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.