# Setup (/docs/menu-api/setup)

## Which version do I need? [#which-version-do-i-need]

Starting at v4.0.0 there are two versions for FiveM: Legacy and Enhanced. Legacy is for FiveM for GTA V (.NET Framework 4.5.2, `CitizenFX.Core`). Enhanced is for FiveM for GTA V Enhanced (.NET 10, `CitizenFX.FiveM.Client`). Both have the same features and the same version number.

----

## 1. Add MenuAPI to your project [#1-add-menuapi-to-your-project]

<Tabs groupId="runtime" items={["Enhanced", "Legacy"]} persist>
  <Tab value="Enhanced">

```sh
dotnet add package MenuAPI.FiveM.Enhanced
```

[MenuAPI.FiveM.Enhanced on nuget.org](https://www.nuget.org/packages/MenuAPI.FiveM.Enhanced/)

  </Tab>
  <Tab value="Legacy">

```sh
dotnet add package MenuAPI.FiveM
```

[MenuAPI.FiveM on nuget.org](https://www.nuget.org/packages/MenuAPI.FiveM/)

  </Tab>
</Tabs>

Your build output gets `MenuAPI.dll` and a `menuapi` folder. Don't edit that folder, it's replaced on every update.

----

## 2. Add the page the menu is drawn on [#2-add-the-page-the-menu-is-drawn-on]

Menus are drawn with NUI. Create `index.html` next to your `fxmanifest.lua`:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Resource</title>
    <link rel="stylesheet" href="menuapi/colour-list.min.css">
    <link rel="stylesheet" href="menuapi/menuapi.min.css">
</head>

<body style="margin: 0; background: transparent; overflow: hidden;">

    <div id="menuapi"></div>

    <script src="menuapi/sprite-cache.min.js"></script>
    <script src="menuapi/glare.min.js"></script>
    <script src="menuapi/colour-list.min.js"></script>
    <script src="menuapi/menuapi.min.js"></script>
</body>

</html>
```

See [How menus are drawn](./nui.md) if you want to add your own things to the page.

----

## 3. Add the files to your fxmanifest [#3-add-the-files-to-your-fxmanifest]

```lua
ui_page 'index.html'

files {
    'MenuAPI.dll',
    'index.html',
    'menuapi/**/*',
}
```

If you already have a `files` list, add the three lines to it.

----

## 4. Make your first menu [#4-make-your-first-menu]

<Tabs groupId="runtime" items={["Enhanced", "Legacy"]} persist>
  <Tab value="Enhanced">

```cs
using CitizenFX.FiveM.Client;
using CitizenFX.FiveM.Shared.Script;
using MenuAPI;

public class MyMenu : IScript
{
    public MyMenu()
    {
        Menu menu = new Menu("My Resource", "Main Menu");
        MenuController.AddMenu(menu);
        menu.AddMenuItem(new MenuItem("Hello!", "My very first menu item."));
    }
}
```

  </Tab>
  <Tab value="Legacy">

```cs
using CitizenFX.Core;
using MenuAPI;

public class MyMenu : BaseScript
{
    public MyMenu()
    {
        Menu menu = new Menu("My Resource", "Main Menu");
        MenuController.AddMenu(menu);
        menu.AddMenuItem(new MenuItem("Hello!", "My very first menu item."));
    }
}
```

  </Tab>
</Tabs>

Press <kbd>M</kbd> in game to open it. Players can change that key, see [Key bindings](./reference/keybindings.md).

The [API Reference](./reference/index.md) has everything else. The [TestMenu](https://github.com/TomGrobbe/MenuAPI/tree/main/TestMenu) in the repository uses every item type.

----

## Something not working? [#something-not-working]

See [When something is wrong](./nui.md#when-something-is-wrong).