Skip to main content

ant-design-menu-translation

To enable menu translations, we need to use translation keys in the menu routes and apply the t function when rendering the menu.

For instance, consider the following routes:

{
        path: `${ORG_STD_ROUTES.USER_BASE_PATH}`,
        key: 'usermenu',
        tab: 'User Account',
        exact: false,
        name: 'User',
        component: () => import('./components/Account'),
        position: IMenuPosition.BOTTOM,
        icon: 'AiOutlineUser',
        priority: 1,
        // authority: ['admin', 'user'],
    },
    {
        path: `${ORG_STD_ROUTES.USER_BASE_PATH}/billing`,
        key: 'usermenu.billing',
        exact: true,
        name: 'Billing Setting',
        component: () => import('./components/Billing'),
        position: IMenuPosition.BOTTOM,
        priority: 3,
        authority: ['admin', 'user'],
    },

In the routes above, we need to use translation keys in the route names instead of the actual names. For example, instead of using route names like User and Billing Setting, we should use translation keys such as menu.user and menu.billing_setting.

Here are the updated routes to make translations work:

{
        path: `${ORG_STD_ROUTES.USER_BASE_PATH}`,
        key: 'usermenu',
        tab: 'User Account',
        exact: false,
        name: 'menu.user',
        component: () => import('./components/Account'),
        position: IMenuPosition.BOTTOM,
        icon: 'AiOutlineUser',
        priority: 1,
        // authority: ['admin', 'user'],
    },
    {
        path: `${ORG_STD_ROUTES.USER_BASE_PATH}/billing`,
        key: 'usermenu.billing',
        exact: true,
        name: 'menu.billing_setting',
        component: () => import('./components/Billing'),
        position: IMenuPosition.BOTTOM,
        priority: 3,
        authority: ['admin', 'user'],
    },

The translation keys should be defined in the menu.json file in the package that have those menu as follows:

image