Progress Telerik UI for Blazor

Blazor Menu

  • Show a list of options in a familiar dropdown and popup menu structure, while letting users navigate across your app and even outside of it with the Blazor Мenu component.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
  • 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.

    Telerik UI for Blazor Menu Overview
  • 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.

    Telerik UI for Blazor Data Binding
  • 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.

    Telerik UI for Blazor Menu Images
  • 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.

    Telerik UI for Blazor Menu Orientation
  • Customizing Menu with Templates

    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

    Telerik UI for Blazor Menu Customization with 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.

    Telerik UI for Blazor Events
  • The Telerik Blazor Menu has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). 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.

    Telerik UI for Blazor Menu Theming

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.