# Role-based Menu component items

{% hint style="success" %}
Here, we talk about [Menu](https://docs.uibakery.io/reference/working-with-components/menu), [Context menu](https://docs.uibakery.io/reference/working-with-components/context-menu-button), and [Horizontal menu](https://docs.uibakery.io/reference/working-with-components/horizontal-menu) components.
{% endhint %}

UI Bakery gives you the ability to configure specific menu items, for Menu components, which users can access based on their [roles](https://docs.uibakery.io/concepts/workspace-management/roles-in-ui-bakery). \
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:

```javascript
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;
```

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F8mzvbR4H2pZTOtZuNTuj%2FCleanShot%202025-03-21%20at%2013.07.13%402x-min.png?alt=media&#x26;token=5a948468-c0c6-49b7-98ba-717b05dc36ef" alt=""><figcaption></figcaption></figure>