# Contextmenu Usage

## Types

***

### Button Data

<table><thead><tr><th>Field</th><th>Type</th><th>Description</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td>header</td><td>string</td><td></td><td>true</td></tr><tr><td>text</td><td>string</td><td></td><td>false</td></tr><tr><td>onClick</td><td>string</td><td>Event to trigger</td><td>false</td></tr><tr><td>leftIcon</td><td>string</td><td>Font Awesome Icon Name</td><td>false</td></tr><tr><td>rightIcon</td><td>string</td><td>Font Awesome Icon Name</td><td>false</td></tr><tr><td>data</td><td>any</td><td>Data to pass when triggering onClick event</td><td>false</td></tr><tr><td>iconColor</td><td>string</td><td>Color hex</td><td>false</td></tr><tr><td>subMenu</td><td><a href="#menu-data">Menu Data</a></td><td>Creates sub menu on click</td><td>false</td></tr><tr><td>confirm</td><td>Confirm Menu Data</td><td>Creates confirm menu on click</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>Disables button</td><td>false</td></tr></tbody></table>

### Menu Data

<table><thead><tr><th>Field</th><th>Type</th><th>Description</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td>items</td><td><a href="#button-data">Button Data</a>[]</td><td></td><td>true</td></tr><tr><td>onClose</td><td>string</td><td>Event to trigger if menu is closed</td><td>false</td></tr></tbody></table>

### Confirm Menu Data

<table><thead><tr><th>Field</th><th>Type</th><th>Description</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td>header</td><td>string</td><td></td><td>true</td></tr><tr><td>text</td><td>string</td><td></td><td>false</td></tr><tr><td>onCancel</td><td>string</td><td>Event to trigger on cancel button clicked</td><td>false</td></tr><tr><td>onConfirm</td><td>string</td><td>Event to trigger on confirm button clicked</td><td>false</td></tr><tr><td>rightIcon</td><td>string</td><td>Font Awesome Icon Name</td><td>false</td></tr><tr><td>leftIcon</td><td>string</td><td>Font Awesome Icon Name</td><td>false</td></tr><tr><td>data</td><td>any</td><td>Data to pass when triggering on cancel or on confirm events (if undefined it will take parents data)</td><td>false</td></tr></tbody></table>

## Examples

***

### Creating Contextmenu

```lua
local menu = {
    items = {
        {
            header = "User Info",
            leftIcon = "user"
        },
        {
            header = "Location",
            text = "x = 0.0, y = 0.0, z = 0.0",
            leftIcon = "location-dot",
            onClick = "print",
            data = "coords"
        },
        {
            header = "Heading",
            text = "180.0",
            leftIcon = "compass",
            onClick = "print",
            data = "heading"
        }
    }
}

exports["no-contextmenu"]:CreateMenu(menu)
```

### Handling Onclick Events

```lua
AddEventHandler("print", function(data)
    if data == "heading" then
        return print(GetEntityHeading(PlayerPedId()))
    end
    
    if data == "coords" then
        return print(GetEntityCoords(PlayerPedId()))
    end
end)
```

### Dynamic Submenus

<pre class="language-lua"><code class="lang-lua">local users = {"Kyle", "Alice"}

AddEventHandler("users:menu", function()
    local menu = {
        items = {}
    }
    
    for _, user in pairs(users) do
        menu.items[#menu.items + 1] = {
            header = user,
            leftIcon = "user",
            rightIcon = "chevron-right",
            onClick = "user:menu",
            data = user
        }
    end
    
    -- Creates new menu based on users
    -- Sorts menu by usernames
    exports["no-contextmenu"]:CreateMenu(menu, true)
end)

AddEventHandler("user:menu", function(userName)
    local userData = fetchUser(userName) -- fetchs user based on passed data
    local menu = {
        items = {
            {
                header = userName,
                leftIcon = "user"
            },
            {
                header = "Age",
                text = userData.age
            },
            {
                header = "Phone",
                text = userData.phoneNumber
            }
        }
    }
    
<strong>    -- creates sub menu based on last opened menu
</strong>    exports["no-contextmenu"]:CreateSubMenu(menu)
end)
</code></pre>