The basis of This template is the following project made using the React.Therefore, I am forced to leave a link to the author of the original project.
Original project: Click here
Responsive layout with advanced sidebar menu built with CSS and Blazor. The project uses a library of icons named as Remix
Features
- Fully responsive
- Collapsable sidebar
- Multi level menu
- RTL support
- Customizable
Menu items can be represented as follows:
List<MenuItem> menuItems = new()
{
new MenuItem(href:"/home", title: "Home", icon:"ri-home-3-fill"),
new MenuItem(href:"/counter", title: "Counter", icon:"ri-add-box-fill"),
new MenuItem(href:"/weather", title: "Weather", icon:"ri-bar-chart-horizontal-line"),
};
nested menu items can be easily added. Below is an example of a complex multi-level menu:
var menuItem = new MenuItem(title:"Components", icon:"ri-vip-diamond-fill", suffix: new("Hot", "primary"), childMenuItems:
[
new MenuItem(href:"#", title:"Grid"),
new MenuItem(title:"Layout", childMenuItems:
[
new MenuItem(title:"Forms", childMenuItems:
[
new MenuItem(href:"#", title:"Input"),
new MenuItem(href:"#", title:"Select"),
new MenuItem(title:"More", childMenuItems:
[
new MenuItem(href:"#", title:"CheckBox"),
new MenuItem(href:"#", title:"Radio"),
new MenuItem(title:"Want more", childMenuItems:
[
new MenuItem(href:"#", title:"You made it"),
]),
]),
]),
]),
]);