/BlazorProSidebar

Responsive layout with advanced sidebar menu built with CSS and Blazor.

Primary LanguageHTML

Blazor Pro Sidebar

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

adaptive

submenu

Ohter

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"),
                ]),
            ]),
        ]),
    ]),
]);