# Context Menu

#### lib.registerContext <a href="#libregistercontext" id="libregistercontext"></a>

Used for registering a context menu.

```lua
lib.registerContext(context)
```

* id: `string`
  * Unique menu identifier, will be used to open the menu.
* title: `string`
  * Title display in the menu; has markdown support.
* menu?: `string`
  * Menu identifier - if defined there will be a back arrow next to the menu title that will take you to the menu you defined.
* canClose: `boolean`
  * If set to false the user won't be able to exit the menu without pressing one of the buttons.
* onExit?: `function`
  * Function that will be ran when the user closes their context menu with ESC.
* onBack?: `function`
  * Function that will be ran when the user presses the back button to return to a previous menu.
* options: `table` (`object` or `array`)
  * item: `key` (`string`) or `table` (`object`)
    * title?: `string`
      * If not using keys then sets the title for the button; has markdown support.
    * disabled?: `boolean`
      * Grays out the button and makes it unclickable.
    * menu?: `string`
      * Menu identifier that the button will take you to, when defined an arrow.
    * onSelect: `function`
      * Function that's ran when the button is clicked.
    * icon?: `string`
      * FontAwesome icon that will be displayed on the left side, works the same as notification and textui icons.
      * Also supports image urls, png and webp files but are not recommend to use over font awesome icons.
    * iconColor?: `string`
      * Colour of the displayed icon.
    * progress?: `number`
      * Adds a progress bar filled to this percentage
    * colorScheme?: `string`
      * Sets the color scheme of the progress bar. Current options can be found here:
        * <https://mantine.dev/theming/colors/#default-colors>
        * For example: `blue` or `teal`
    * arrow?: `boolean`
      * Shows an arrow on the right side like `menu` does, useful when you are opening a menu from an event. Can be set to false to hide it.
    * description?: `string`
      * Description that will appear under the button title that is defined as a key; has markdown support.
    * image?: `string`
      * Url to an image that will be displayed in the button's metadata.
    * metadata?: `string[]` or `object` or `array`
      * Information that will display on the side upon hovering a button.
      * label: `string`
      * value: `any`
      * progress?: `number`
        * Display a progress bar in the metadata.
    * event?: `string`
      * Event that the button is going to trigger.
    * serverEvent?: `string`
      * Server event that the button is going to trigger.
    * args?: `any`
      * Arguments that will be sent to the events or onSelect function.

You can register as many context menus in one `lib.registerContext` function as you'd like.

The menu can be either in the order you write it in, or sorted alphabetically.\
To sort the menu alphabetically the buttons (and/or metadata) need to be defined as keys, otherwise not using keys and instead using tables will make the menu be in the order you define it as.

#### lib.showContext <a href="#libshowcontext" id="libshowcontext"></a>

Opens a registered context menu by it's id.

```lua
lib.showContext(id)
```

* id: `string`

#### lib.hideContext <a href="#libhidecontext" id="libhidecontext"></a>

Hides any currently visible context menu.

```lua
lib.hideContext(onExit)
```

* onExit: `boolean`
  * Defines whether the onExit function for the menu should be ran or not.

#### lib.getOpenContextMenu <a href="#libgetopencontextmenu" id="libgetopencontextmenu"></a>

Returns the id of the currently open context menu.

If no context menu is open returns `nil`.

```lua
lib.getOpenContextMenu()
```

#### Usage Examplee <a href="#usage-example" id="usage-example"></a>

First we register the menu with our specified options then we call the show function in the command.

```lua
lib.registerContext({
  id = 'some_menu',
  title = 'Some context menu',
  options = {
    {
      title = 'Empty button',
    },
    {
      title = 'Disabled button',
      description = 'This button is disabled',
      icon = 'hand',
      disabled = true
    },
    {
      title = 'Example button',
      description = 'Example button description',
      icon = 'circle',
      onSelect = function()
        print("Pressed the button!")
      end,
      metadata = {
        {label = 'Value 1', value = 'Some value'},
        {label = 'Value 2', value = 300}
      },
    },
    {
      title = 'Menu button',
      description = 'Takes you to another menu!',
      menu = 'other_menu',
      icon = 'bars'
    },
    {
      title = 'Event button',
      description = 'Open a menu from the event and send event data',
      icon = 'check',
      event = 'test_event',
      arrow = true,
      args = {
        someValue = 500
      }
    }
  }
})
```

Then we can also register our second menu called `other_menu`

```lua
lib.registerContext({
  id = 'other_menu',
  title = 'Other context menu',
  menu = 'some_menu',
  onBack = function()
    print('Went back!')
  end,
  options = {
    {
      title = 'Nothing here'
    }
  }
})
```

And the event that we are going to run from the `some_menu` menu, which is going to open another menu.

```lua
RegisterNetEvent('test_event', function(args)
  lib.registerContext({
    id = 'event_menu',
    title = 'Event menu',
    menu = 'some_menu',
    options = {
      {
        title = 'Event value: '..args.someValue,
      }
    }
  })

  lib.showContext('event_menu')
end)
```

Lastly we register a test command to show the `some_menu` menu.

```lua
RegisterCommand('testcontext', function()
  lib.showContext('some_menu')
end)
```

The data from the `args` table in the menu is passed as a first argument to the event you register.

Using this event we also register a new context menu with it's own options.

By defining a `menu` param to be the id of the first menu we can get the back arrow button next to the menu title that will take us back.

<div align="left"><figure><img src="https://i.imgur.com/TkaH2P9.png" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://i.imgur.com/0mMmwgi.png" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://i.imgur.com/RbT1tKX.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://i.imgur.com/zjIiROj.png" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://max-workx.gitbook.io/maxworkx-private-fivem-docs/library/overextended/client-sided/ui/context-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.