• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Template in ASP.NET MVC Menu Bar Control

This sample demonstrates the template functionalities of the Menu component. Interact with Menu using hover/click to display sub menu pop-up items with its customized templates.

DEMO
SOURCE

The menu component has an option to customize menu items using the Template property, so that the menu items can be rendered according to the requirement.

In this demo, the below customizations are demonstrated.

  • Header menu items and the 'Products' sub menu items represents the customization of default rendering of li elements i.e. ${category} in template.
  • 'Services' sub menu item represent the customization of single li element which simulate the default rendering of Products sub menu items i.e. ul li elements with added Badge component are rendered in a single li with customized css styles.
  • 'About Us' sub menu item is shown with Card component in a single li.

For more information, you can refer to the templates section from the documentation.