Role-based Menu component items

Here, we talk about Menu, Context menu, and Horizontal menu components.

UI Bakery gives you the ability to configure specific menu items, for Menu components, which users can access based on their roles. Below, is an example that you can modify according to the roles in your organization. Once you're ready, switch to JS mode in the Items property of the Menu component and specify the following code:

const userHasAccess = {{user.role}} === 'admin'; // Replace with your actual access condition
const menuItems = [
  {
    title: 'Dashboard',
    route: '/dashboard',
    disabled: false  // This item is always enabled
  },
  {
    title: 'Admin Panel',
    route: '/admin',
    disabled: !userHasAccess  // This item is disabled if the user is not an admin
  }
  // ... other menu items
];

return menuItems;