admin

Please wait...

menu Sidebar Menu

To customize the sidebar menu, you only need to modify the sidebar-items.ts file located in the layout/sidebar directory.

code sidebar.metadata.ts

The route metadata interface defines the structure for all sidebar menu items.

// Sidebar route metadata
export interface RouteInfo {
  path: string;
  title: string;
  iconType: string;
  icon: string;
  class: string;
  groupTitle: boolean;
  badge: string;
  badgeClass: string;
  role: string[];
  submenu: RouteInfo[];
}

radio_button_checked Single Menu Setting

To add a single menu item, use the following configuration in your sidebar items array:

{
  path: "calendar",
  title: "Calendar",
  iconType: "material-icons-two-tone",
  icon: "event_note",
  class: "",
  groupTitle: false,
  badge: "New",
  badgeClass: "badge bg-blue sidebar-badge float-right",
  role: ["Admin", "Employee"],
  submenu: [],
}

list Multilevel Dropdown Menu

To set up a multi-level dropdown menu, follow this structure:

{
  path: "",
  title: "Multi level Menu",
  iconType: "material-icons-two-tone",
  icon: "slideshow",
  class: "menu-toggle",
  groupTitle: false,
  role: ["Admin"],
  submenu: [
    {
      path: "/multilevel/first1",
      title: "First",
      class: "ml-menu",
      submenu: [],
    },
    {
      path: "/",
      title: "Second",
      class: "ml-sub-menu",
      submenu: [
        {
          path: "/multilevel/secondlevel/second1",
          title: "Second 1",
          class: "ml-menu2",
          submenu: [],
        }
      ],
    }
  ],
}