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

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

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)

Contextmenu Usage

Types

Button Data

Menu Data

Confirm Menu Data

Examples

Creating Contextmenu

Handling Onclick Events

Dynamic Submenus