Menu
This guide provides an overview of how to use, manage, and customize the menu configuration in your project.
The menu is configured at src/menu/index.tsx
Each menu item supports properties like id
, title
, icon
, url
, type
, and roles
for fine-grained control.
Adding or Removing Menu Items
Adding a New Menu Group 1. Create a new file (e.g.,
newGroup.tsx
) in the same folder asmanage.tsx
andother.tsx
. 2. Define the menu group structure as aNavItemType
object:src/menu/newGroup.tsx3. Import and add the new group in
index.tsx
:src/menu/index.tsxRemoving an Existing Menu Group 1. Open
index.tsx
. 2. Remove the corresponding group from theitems
array:src/menu/index.tsxAdding a New Menu Item 1. Open the desired group file (e.g.,
manage.tsx
). 2. Add a new item to thechildren
array:Removing a Menu Item 1. Open the desired group file. 2. Remove the specific item from the
children
array.
Changing Icons
To change an icon for a menu item:
1. Identify the icon
property of the menu item.
2. Replace it with the desired icon name:
Ensure the new icon exists in your icon library.
Managing Roles
The roles
property controls which user roles can access specific menu items. for more details refer documentation of role guard.
Adding Roles 1. Open the file where the menu item is defined. 2. Add the desired roles to the
roles
array:Removing Roles 1. Remove the role from the
roles
arrayMaking a Menu Item Public To make a menu item accessible to all users, remove the
roles
property:
Translation Keys
Menu titles use the FormattedMessage
component for internationalization.
Internationalization is set up in the src/utils/locales
folder, which currently contains JSON files for four languages.
1. en.json
English
2. fr.json
French
3. ro.json
Romanian
4. zh.json
Chinese (Simplified)
Adding a New Translation Key 1. Add the key to your translation files:
2. Use the key in the menu definition:
Last updated