Contextmenu Usage

Types

---

Button Data

Field	Type	Description	Required
header	string
text	string
onClick	string	Event to trigger
leftIcon	string	Font Awesome Icon Name
rightIcon	string	Font Awesome Icon Name
data	any	Data to pass when triggering onClick event
iconColor	string	Color hex
subMenu	Menu Data	Creates sub menu on click
confirm	Confirm Menu Data	Creates confirm menu on click
disabled	boolean	Disables button

Menu Data

Field	Type	Description	Required
items	Button Data[]
onClose	string	Event to trigger if menu is closed

Confirm Menu Data

Field	Type	Description	Required
header	string
text	string
onCancel	string	Event to trigger on cancel button clicked
onConfirm	string	Event to trigger on confirm button clicked
rightIcon	string	Font Awesome Icon Name
leftIcon	string	Font Awesome Icon Name
data	any	Data to pass when triggering on cancel or on confirm events (if undefined it will take parents data)

Examples

---

Creating Contextmenu

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

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

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
            }
        }
    }
    
    -- creates sub menu based on last opened menu
    exports["no-contextmenu"]:CreateSubMenu(menu)
end)