Contextmenu Usage

Types

---

Button Data

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

Menu Data

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

Confirm Menu Data

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

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)