# :icon-project-template: Custom menu

If you want to use a custom menu of your own to handle hostaging options, it's totally possible! Currently we offer
two kinds of menu style "built-in" and "ox". If you're looking to implement something of your own it's still possible **however**
you're going to require of some basic coding skills.

### 1. Updating config value
Head to `of_hostage/shared.lua` and select between the possible options.
```lua
-- ...
  shared.menu_style = "built-in" -- built-in, ox, custom
```

### 2. Edit your menu preferences
Head to `of_hostage\client\modules\nui\custom\ox.lua` as an example. If the resource was found then this file will be added as a
preferred nui handler, if something messes up then we'll default to the built-in menu. You'll find something like this:
+++ of_hostage\client\modules\nui\custom\ox.lua
```lua
Nui.customHandler["ox"] = Client.DependStatus.lib == "ox_lib" and shared.menu_style == "ox" and
(function()
  local ctx = {
    id = Nui.context,
    title = "Hostage menu",
    canClose = true,
    onExit = Nui.closeMenu,
    onBack = Nui.closeMenu,
    options = {}
  }

  local function buildOptionsWithFlags(flags, options)
    local aux = {}

    for i = 1, #options do
      local iFlag = options[i]
      local isHidden = lib.table.contains(flags, iFlag)
      if isHidden then goto continue end

      table.insert(aux, {
        title = Client.T(iFlag),
        onSelect = function()
          TriggerEvent("of-hostage:handleOption", { action = { id = iFlag } })
          Nui.closeMenu()
        end,
      })

      :: continue ::
    end

    return #aux ~= 0 and aux or {
      title = "No options found"
    }
  end


  return {
    openMenu = function(flags)
      local newCtx = lib.table.deepclone(ctx)
      newCtx.options = buildOptionsWithFlags(flags, Nui.flagList)

      lib.registerContext(newCtx)
      lib.showContext(Nui.context)
    end,
  }
end)()
```
+++

### 3. Implementing your custom menu
If you decided to implement your custom menu you'll need to take a few details into account. Obviously, set `shared.menu_style` to `custom`
in the script config (`shared.lua`).

#### 3.1 Option flags
In order to control which options are displayed and which actions we'll be dispatching we send **flags** to the NUI
```lua
Nui.flagList = { 
  "cuff", "uncuff", "grab", "grab_stop", 
  "follow", "follow_stop", "car_in", "car_out",
  "knees", "knees_stop", "carry", "carry_stop",
  "dead_rob", "free", "no_hostage"
}
```

The implementation is up to you, just make sure to send the **correct** flag when an item is selected.

#### 3.2 Dispatching an action
In this case, we'll be sending an event to the client with the selected flag. Since we're not using the built-in menu,
you should manually close the menu so during-menu threads are killed.

It should look something like this:
```lua
(function()
  TriggerEvent("of-hostage:handleOption", { action = { id = "my_flag_to_handle" } })
  Nui.closeMenu() -- Really important, otherwise you'll get into issues
end)()
```

#### 3.3 What to return as a handler
Essentially, what we're doing is indexing a "custom" handler inside `Nui.customHandler` so we must return a table
that looks like this in order to make it work properly:
```lua
Nui.customHandler["custom"] = (function()
  -- single-time-executed-code?
  return {
    openMenu = function(flags)
      -- your code
    end
  }
end)()
```

!!!
  Please understand that this feature requires some coding skills. We might be able able to help you with some questions.
  However, we cannot implement it for you since every client is running under a unique environment. <br><br>
  **PS: If popular menu systems are suggested, we might add pre-built compatibility**
!!!