Getting Started with IntegralUI Menu Component
IntegralUI Menu is a Blazor Component that allows you to create static and dynamic menus. You can load a menu with all settings during run-time from local or remote data source. In addition, you can add checkboxes, radio buttons or any custom HTML element using menu templates to each menu item. In following sections, you can find details about different features available in the Menu component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
List of Included Features
A more detailed information is available here: Features in IntegralUI for Blazor components.
How to Use IntegralUI Menu
At first, you need to install the IntegralUI for Blazor library on your side. Detailed information is available here: How to Use IntegralUI for Blazor. It provides information on how to setup and use components in Blazor .NET. In general, you need to open your application and add a reference to a component you want to use.
To use the IntegralUI Menu component, you need to do the following:
- Open a Blazor page in your project
- Add code line that will import the IntegralUI components
- Place the Menu component using the IntegralUIMenu tag
- Specify the generic TItem type that you will use as a data model
- Set the Items property to connect the Menu to your data source
- Handle the MenuClick event in your code, which is executed whenever menu option is clicked
- (optional) Define the template that will be used to create the content for menu items using the ItemTemplate
- (optional) Add custom HTML elements or other Blazor components inside the template
- (optional) Create a reference to the component using the @ref attribute, to call public methods
Here is an example:
@page "/"
@using IntegralUI.Components
<IntegralUIMenu @ref=menuRef TItem="CustomMenuItem"
Items="@items"
MenuClick="@menuClick"
<ItemTemplate>
<span>@context.Item?.Text</span>
</ItemTemplate>
</IntegralUIMenu>
@code {
// Get a reference to the IntegralUI Menu component to call public methods
private IntegralUIMenu? menuRef;
// Data model
public class CustomMenuItem
{
public string? Id { get; set; }
public List Items { get; set; } = [];
public string? ParentId { get; set; }
public string? Text { get; set; }
public IntegralUIMenuItemType Type { get; set; } = IntegralUIMenuItemType.Item;
}
public List<CustomMenuItem> items = new()
{
new CustomMenuItem
{
Id = "1",
Text = "File",
Items = new()
{
new CustomMenuItem
{
Id = "11",
ParentId = "1",
Text = "New",
Items = new()
{
new CustomMenuItem { Id = "111", ParentId = "11", Text = "Project" },
new CustomMenuItem { Id = "112", ParentId = "11", Text = "Window" }
}
},
new CustomMenuItem { Id = "12", ParentId = "1", Text = "Open" },
new CustomMenuItem { Id = "13", ParentId = "1", Text = "Save As..." },
new CustomMenuItem { Id = "14", ParentId = "1", Text = "Save All" },
new CustomMenuItem { Id = "15", ParentId = "1", Type = IntegralUIMenuItemType.Separator },
new CustomMenuItem { Id = "16", ParentId = "1", Text = "Page Setup" },
new CustomMenuItem { Id = "17", ParentId = "1", Text = "Print" },
new CustomMenuItem { Id = "18", ParentId = "1", Type = IntegralUIMenuItemType.Separator },
new CustomMenuItem { Id = "19", ParentId = "1", Text = "Exit" }
}
},
// . . .
};
private void menuClick(CustomMenuItem item)
{
if (item?.ParentId is not null)
Console.WriteLine($"Menu item: " + item?.Text + " is clicked.");
}
}
Properties, Events and Methods
A detailed list for each property, event and method is available here: IntegralUI Menu API.
Data
You can populate the Menu component with data from various sources. In general, you need to create a list of menu items. Then apply this list to the Items property.
- Create an object that will represent the data model
- Apply it to the TItem property
- Create or load a list of objects (based on specified data model) and apply it to the Items property
Data Binding
If your data uses different field names than the ones used by the Menu, you may need to bind your data to the Menu, using DataFields property. Although, having custom fields in your data is fully supported, this may be required if there is overlapping with predefined ones already used by the Menu component. The most important fields that may require data binding are:
- Id - a unique identifier used to distinguish the item in the list
- Items - a list of child items for this item
- ParentId - an identifier of the parent that contains the item
- Text - represents the item label
- Type - determines the item type: Header, Item or Separator
There are many other predefined fields available, a complete list of fields in use is available as part of IntegralUIItemFields class.
When using templates this may not be required, because within the template you can have any custom fields set in your code.
Layout
By default, Menu component has an internal template shared among all menu items that displays the item label. You can also create your own custom menu template that allows you to add any custom HTML elements and arrange them in different layouts.
Custom Menu Template
By default, each menu item shows a label only and sub-menus, if any. In addition, the IntegralUI Menu component provides an option to create custom menu templates, where you can add any HTML elements or other Blazor components. You can create a template and share it among all menu items, or set conditions and use multiple different templates for each item separately.
Labeled Separator
In general, menu separators are presented with a horizontal line and used to divide different parts of the menu. This is acceptable in most cases, however to create a more informative menu separator you can create labeled separator.
Vertical Menu
In general, the Menu component has horizontal orientation, where all root items appear in one line horizontally. You can also have a menu with vertical orientation; the best case is when you want to create navigational links vertically aligned to the left or right side.
Styling
You can modify the Menu appearance using CSS custom properties. Most parts of Menu has a CSS custom property that you can change in on your side, for example: --iui-menu-background, allows you to change the background color of the component. You only need to set the Id property of the Menu component, and then use it as a CSS selector where you will set a new value:
@page "/"
@using IntegralUI.Components
<IntegralUIMenu Id="menu-overview">
// . . .
</IntegralUIMenu>
// . . .
// CSS
[id="menu-overview"] {
--iui-menuitem-padding: 5px;
--iui-menuitem-root-width: 70px;
--iui-menuitem-width: 200px;
}
In general, you can change every component part in this way. In addition, item templates are fully customizable, with your own CSS settings.
Color Schemes and Themes
There are two color schemes that you can use: Dark and Light. By specifying the ColorScheme property you can change the overall component appearance to darker or lighter colors.
Utility
You can add different functionalities to the Menu component. In following sections below, you will find some examples on how to create custom menu using different HTML elements or Blazor components.
Add CheckBox to Menu Items
IntegralUI Menu component comes with built-in option that allows you to add checkbox to menu items. Each item can have its own check box, shown in front of the label. Any change to the check box will fire an event that you can handle in your code and set a specific action.
Menu with Radio Buttons
Menu component provides an option to add menu items with radio buttons. Within the same menu you can have different groups, based on your settings. Any change to the button state will fire an event that you can handle in your code and add custom action.
Menu with Keyboard Shortcuts
By default, the Menu component doesn't have any shortcuts set. However, you can add shortcut within menu settings for all or to specific menu items. Any combination of CTRL, SHIFT, ALT and function or regular keys is acceptable.
Conclusion
IntegralUI Menu is a Blazor component that allows you to create static or dynamic menus. Menu can have check boxes, radio buttons, shortcuts, labeled separators or you can create your own custom menu using different HTML elements inside the menu template. In addition, the component is fully customizable via CSS, you can use CSS custom properties to change the menu appearance.
Menu component is part of IntegralUI for Blazor that you can use to develop web applications with Blazor .NET framework.