Modifying the Sidebar

The structure of the AsideMenu React component is as follows:

  1. AsideMenu
    1. AsideMenuLayer
    2. AsideMenuList
      1. AsideMenuItem
        1. AsideMenuList

The AsideMenu component is used in the following way:

<AsideMenu
  isAsideMobileExpanded={isAsideMobileExpanded}
  isAsideLgActive={isAsideLgActive}
  menu={menuAside}
  onAsideLgClose={() => onAsideLgClose(false)}
/>

The menuAside variable is an object for configuring menu items and sub-items.

isAsideMobileExpanded, isAsideLgActive, onAsideLgClose are variables and functions to control AsideMenu visibility.

Adding Items to the Sidebar Menu

To add a new item to the sidebar, you need an array of objects, as shown below. The href attribute is mandatory for the menu item to function as a link.

const menuAside = [
  {
    href: '/dashboard',
    icon: mdiDashboard,
    label: 'Dashboard',
  },
  {
    href: '/users/users-list',
    label: 'Users',
    icon: mdiAccount,
  },
];

This will result in:

Creating Submenus

To add a submenu, create an object without the href attribute. The AsideMenu component will understand that this is a menu with a nested list.

For example, to add a nested list to the "Dashboard" item, add a menu property with the desired items to the "Dashboard" object.

const menuAside = [
  {
    icon: mdiDashboard,
    label: 'Dashboard',
    menu: [
      {
        icon: mdiAccount,
        label: 'My Profile',
        href: '/profile',
      },
      {
        icon: mdiLogout,
        label: 'Log Out',
        isLogout: false,
      },
    ],
  },
  {
    href: '/users/users-list',
    label: 'Users',
    icon: mdiAccount,
  },
];

This will result in:

Summary

To add a new menu item to the sidebar:

  1. Add a new object to the menuAside array.
  2. Ensure the object has a href attribute to function as a link.

To add a submenu:

  1. Add an object without a href attribute to the menuAside array.
  2. Add a menu property to this object, which contains an array of submenu items.

By following these steps, you can effectively manage and expand the sidebar navigation in your React application.

If you face any difficulties, please message us on our Discord, Forum, Twitter, or Facebook. We will respond to your inquiry as quickly as possible!

← Adding a Widget                                  Using Modal and Cards →