# Add a menu from the backend

To add a menu from the backend, you can follow the steps below:

1.  Open the file menu.ts *(src/store/slices/menu.ts)*, and edit API URL in the getMenu function.

`const response = await axios.get(`**`'/api/menu/widget'`**`);`

2. Open the file App.tsx *(src/App.tsx),* and add the below code of the line.

<pre class="language-typescript"><code class="lang-typescript">import { useEffect, useState } from 'react';

import Loader from 'ui-component/Loader';

import { dispatch } from 'store';
import { getMenu } from 'store/slices/menu';

const App = () => {
    ...
<strong>    const [loading, setLoading] = useState&#x3C;boolean>(false);
</strong>
    useEffect(() => {
        dispatch(getMenu()).then(() => {
            setLoading(true);
        });
    }, []);

    if (!loading) return &#x3C;Loader />;
    ...
}

</code></pre>

3. Add file **menu.tsx** in src/menu-items, and copy code from widget.tsx (src/menu-items/). Set icons and local files according to API response.
4. Open the file index.tsx *(src/layout/MainLayout/MenuList/index.tsx)*, and add the below code of the line.

```javascript
import { memo, useEffect } from 'react';

import { Menu } from 'menu-items/menu';

const MenuList = () => {
    ...
    useEffect(() => {
        handlerMenuItem();
        // eslint-disable-next-line
    }, []);

    let getMenu = Menu();
    const handlerMenuItem = () => {
        const isFound = menuItem.items.some((element) => {
            // use root parent id according to response instead of 'menu'
            if (element.id === 'menu') {
                return true;
            }
            return false;
        });

        if (getMenu?.id !== undefined && !isFound) {
            menuItem.items.splice(1, 0, getMenu);
        }
    };
    ...
}
```