Menu

vorp menu is a library that allows you to create menus in game with a rdr2 style.

GetMenuData

GetMenuData

on top of your client scripts add this to get the menu data setters and getters

return · table

The menu data

local Menu = exports.vorp_menu:GetMenuData()

CloseAll

CloseAll

Close all menus

MenuData.CloseAll()

Menu Elements

Menu elements are the elements that will be displayed in the menu

Elements

Menu Elements

for each element you can use the following params

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

itemHeight · string

The height of the tab element example 4vh

labelPos · string

The position of the label left , center only

footerText · string

The text of the footer

isNotSelectable · boolean

If true the element will not be selectable, meaning the red square will not be shown

image · string

The image name from vorp_inventory items folder, useful to create the grid menu

 local menuElements = {
    {
        label = "name",
        value = "value",
        desc = "description",
        itemHeight = "4vh", -- optional
        labelPos = "left", -- optional
        footerText = "any text here" -- optional
        isNotSelectable = true -- optional
        image = "image" -- optional
    }
 }

Menu Elements

for each element you can use the following params

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

itemHeight · string

The height of the tab element example 4vh

labelPos · string

The position of the label left , center only

footerText · string

The text of the footer

isNotSelectable · boolean

If true the element will not be selectable, meaning the red square will not be shown

image · string

The image name from vorp_inventory items folder, useful to create the grid menu

 local menuElements = {
    {
        label = "name",
        value = "value",
        desc = "description",
        itemHeight = "4vh", -- optional
        labelPos = "left", -- optional
        footerText = "any text here" -- optional
        isNotSelectable = true -- optional
        image = "image" -- optional
    }
 }

Slider Number

allows to use a slider type of element to select a number , can be floats or integers this is defined by the hop value

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

type · string · required

The type of the tab element must be slider

min · number

The minimum value , if not defined will default to 0

max · number · required

The maximum value , if not defined will default to 100

hop · number · required

The hop value , can hop by 1 2 etc, to use floats set the hop to 0.1 etc.

local menuElements = {
    {
        label = "name",
        value = 0, 
        desc = "description",
        type = "slider", -- required
        min = 0,
        max = 10,
        hop = 1
    }
}

Slider Text

allows to use a slider type of element to select a string , from a list of strings

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

type · string · required

The type of the tab element must be text-slider

textList · table · required

The list of strings to select from

local menuElements = {
    {
        label = "name",
        value = "value",
        desc = "description",
        type = "text-slider", -- required
        textList = {
            {
                label = "skinny",
                value = "anything you want",
            },
            {
                label = "fatter",
                value = "anything you want",
            }
        }
    }
}

data.current.textIndex will return the index of the selected string

-- example
if data.current.value == "value" and data.current.textIndex then
  local currentValue = data.current.textList[data.current.textIndex].value
end

Linear Label Slider

allows to use a slider type in the label of the element to select a number , can be floats or integers this is defined by the hop value works with press key or drag when cursorEnabled is true

value · number · required

The value

label · string · required

The label

desc · string · required

The description

type · string · required

The type must be label-slider

min · number

The minimum value , if not defined will default to 0

max · number · required

The maximum value , if not defined will default to 100

hop · number · required

The hop value , can hop by 1 2 etc, to use floats set the hop to 0.1 etc.

attributes · table

The attributes of the slider , can be used to style the slider trackColor is the color of the track accepts names or hex codes rgba fillColor is the color of the fill, only accepts linear-gradient you can choose one color or multiple colors and the direction thumbColor is the color of the thumb accepts names or hex codes rgba

local menuElements = {
    {
        label = "name",
        value = 0,
        desc = "description",
        type = "label-slider", -- required
        min = 0,
        max = 10,
        hop = 1,
        attributes = { -- optional
            trackColor = "grey",
            fillColor = "linear-gradient(90deg, #000, #fff)",
            thumbColor = "white"
        }
    }
}

Linear Desc Slider

allows to create multiple sliders in the description of the element, can use integers or floats

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

type · string · required

The type of the tab element must be desc-slider

min · number

The minimum value , if not defined will default to 0

max · number · required

The maximum value , if not defined will default to 100

hop · number · required

The hop value , can hop by 1 2 etc, to use floats set the hop to 0.1 etc.

sliders · table · required

The list of sliders

local menuElements = {
    {
        label = "name",
        value = "any",
        desc = "description",
        type = "desc-slider", -- required
        sliders = {
            {
                label = "Slider one",
                value = 0,
                min = 0,
                max = 1,
                hop = 1,
                color = true, -- custom keys if needed
                attributes = {
                    trackColor = "red",                                                             -- red or #ffff or a multicolor
                    fillColor = "linear-gradient(90deg, red, orange, yellow, green, blue, purple)", -- green or #ffff or a multicolor
                    thumbColor = "grey",                                                          -- yellow or #ffff or a multicolor
                }
            },
            {
                label = "Slider two",
                value = 0.0,
                min = -10.0,
                max = 10.0,
                hop = 0.1,
                comp = true, -- custom keys if needed
            },
        }
    }
}

data.current.sliderIndex will return the index of the selected slider

-- example
if data.current.value == "any" and data.current.sliders then
    local currentValue = data.current.sliders[data.current.sliderIndex].value
end

Label Tick Box

allows to create a tick box in the element

value · string · required

only accept unticked or ticked

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

tickBox · boolean · required

to enable it set to true

local menuElements = {
    {
        label = "name",
        value = "unticked", -- start unticked or ticked
        desc = "description",
        tickBox = true
    }
}

data.current.value will return the value of the tick box

-- example
if data.current.tickBox then
    print(data.current.value)
end

Desc Tick Box

allows to create multiple tick boxes in the description of the element

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

type · string · required

The type of the element must be tick-box

tickBoxes · table · required

The list of tick boxes

local menuElements = {
    {
        label = "label",
        desc = "description",
        value = "value",
        type = "tick-box", -- required
        tickBoxes = {  
            {
                label = "box one",
                value = "ticked", -- value will change to ticket or unticked
            },
            {
                label = "box two",
                value = "unticked", -- value will change to ticket or unticked
            },
        }
    }
}

data.current.tickboxIndex will return the index of the tick box we ticked or unticked

-- example
if data.current.value == "value" and data.current.tickBoxes then
    local currentValue = data.current.tickBoxes[data.current.tickboxIndex].value
end

Desc Price

allows to create a price in the description of the element like RDO

value · string · required

The value of the tab element

label · string · required

The label of the tab element

desc · string · required

The description of the tab element

descPrice · table · required

The price of the tab element

• amount is the amount of the price
• icon is gold or money only
• text the label

local menuElements = {
    {
        label = "label",
        desc = "description",
        value = "value",
        descPrice = {
            amount = 100.00,
            icon = "money",
            text = "Price",
        }
    }
}

   -- example
   if data.current.value == "value" and data.current.descPrice then
      local currentValue = data.current.descPrice.amount
   end

Menu Params

title · string · required

The title of the menu

subtext · string · required

The subtext of the menu

align · string · required

The align of the menu , top-right , top-center , top-left

elements · table · required

The elements for the menu

lastmenu · string

The last menu function name if you wish to go back to the previous menu this will enable the following code and call a global function

if (data.current == "backup") then
    return _G[data.trigger](parameters,parameters)
end

itemHeight · string

sets to all elements to this height 4vh etc

labelPos · string

sets the position of the label to all elements

• left
• center

divider · boolean

adds a divider to the footer of the menu to all elements

fixedHeight · boolean

sets the fixed height of the menu, so it doesnt resize depending on elements and description

enableCursor · boolean

enables the cursor for the menu, key inputs will still work, including for sliders and tick boxes

• hover over the element and left click to select element then again left click to act as ENTER, or simply press ENTER
• right click to close the menu, or simply press Backspace
• scroll wheel to scroll up and down the menu

maxVisibleItems · number

sets the max visible items in the menu

hideRadar · boolean

hides the radar when the menu opens. to display it again simple pass these params again in these functions

 function(data, menu)
    -- to hide the radar and to play the final sound of the menu closing
    menu.close(hideRadar, soundClose)
    -- also available here 
    Menu.CloseAll(hideRadar, soundClose)
 end

soundOpen · boolean

plays the first opening sound of the menu

confirmButton · table

creates a button in the description , useful when you dont have to create a new element for a button

cancelButton · table

creates a button in the description , useful when you dont have to create a new element for a button

isGrid · boolean

sets the menu to a grid layout, instead of a list layout

use in the menuelements the value image to display item images

useful for creating shops

    local MenuInfo = {
        title = "menu title",
        subtext = "menu sub text",
        align = "top-right", 
        elements = menuElements, 
        lastmenu = "functionName",
        itemHeight = "4vh",
        labelPos = "left",
        divider = true,
        fixedHeight = true,
        enableCursor = true,
        maxVisibleItems = 6,
        hideRadar = true,                          
        soundOpen = true,                                      
        confirmButton = { label = "Confirm", value = "confirm" }, 
        cancelButton = { label = "Cancel", value = "cancel" },
        isGrid = false,                                              
    }

Functions

update elements ,add ,remove ,get elements runtime

Set

addNewElement

this function will add a new element to the current menu elements by order

label · string · required

The label of the element

value · string · required

The value of the element

desc · string · required

The description of the element

menu.addNewElement({
    label = "label",
    value = "open",
    desc = "description"
})

refresh menu to show new element

menu.refresh()

addNewElement

this function will add a new element to the current menu elements by order

label · string · required

The label of the element

value · string · required

The value of the element

desc · string · required

The description of the element

menu.addNewElement({
    label = "label",
    value = "open",
    desc = "description"
})

refresh menu to show new element

menu.refresh()

getElementBy[Value/Index]

find an element by value or index

• data.current.value is available to use in the menu elements
• data.current.index is available to use in the menu elements

local element = menu.getElementByValue(value) 
local element = menu.getElementByIndex(index)

setElement

this function will update a specific element variable

index · number · required

The index of the menu element to update

data.current.index is available to use in the menu elements

variable · string · required

The variable of the menu element to update , label,value,desc, any

newValue · any · required

The new value of the menu element to update

menu.setElement(index, variable, newValue)

refresh menu to show changes

menu.refresh() 

removeElementBy[Value/Index]

this function will remove a specific element by value or index

value · string · required

The value of the element to remove

data.current.value is available to use in the menu elements

index · number · required

The index of the element to update

data.current.index is available to use in the menu elements

loop · boolean

stop looking at the first element found can be used when you loop through several elements and remove all indexes

menu.removeElementByIndex(index,loop) 
menu.removeElementByValue(value,loop)

refresh menu to show changes

menu.refresh()

CloseMenu

this function will close the current menu

showRadar · boolean

show the radar when the menu closes

soundClose · boolean

plays the final sound when the menu closes

menu.close(showRadar, soundClose)

setTitle

this function will set the title of the current menu

title · string · required

The title of the menu

menu.setTitle("title")

refresh menu to show changes

menu.refresh()

Inputs

creates an input box to collect text or numbers etc.

inputType · string · required

The type of input, text, number, password, date

yesno is a special type of input that will just create a yes or no button, no input needed

header · string · required

The header of the input

placeholder · string · required

The placeholder of the input

buttons · table · required

The buttons of the input

maxLength · number

The max length of the input

pattern · string

The pattern of the input

• letters all Unicode letters and spaces
• numbers numbers only
• alphanumeric all Unicode letters and numbers
• no-symbols letters, numbers, spaces (all languages)
• username username with international letters
• phone phone numbers with + for country codes
• email email with international letters
• money money format (supports both . and , decimals)
• no-special no special symbols but allow apostrophes and hyphens

   -- async function
   menu.displayInput({
       inputType = 'text',
       header = 'Enter your name',
       placeholder = 'Type here...',
       buttons = { confirm = "Confirm", cancel = "Cancel" },
       maxLength = 50,
       pattern = 'letters',
   }, 
   function(inputValue)
       -- On submit
       print("User entered: " .. inputValue)
   end, 
   function()
       -- On cancel
        print("User cancelled")
   end)

Menu Example

Menu Example

function OpenMenu()
    -- close any menu before opening
    Menu.CloseAll()

    local menuElements = {

        { 
            label = "name",
            value = "value",
            desc = "description"
        }
        {
            label = "name",
            value = 0, 
            desc = "description",
            type = "slider",
            min = 0,
            max = 10,
            hop = 1
        }
        { 
            label = "name",
            value = "value",
            desc = "description",
            itemHeight = "4vh" 
        }
    }
    

    Menu.Open("default", GetCurrentResourceName() , "OpenMenu", -- unique namespace will allow the menu to open where you left off
        {
            title = "title",
            subtext = "subtext",
            align = "top-left", -- top-right , top-center , top-left
            elements = menuElements, -- elements needed
            lastmenu = "functionName", -- if you wish to go back to the previous menu , or remove (optional)
            maxVisibleItems = 6,                                      -- max visible items in the menu
            hideRadar = true,                                         -- hides the radar
            soundOpen = true,                                         -- plays the open sound of the menu

        },
        function(data, menu) -- submit callback
          -- triggers when pressing/clicking enter 
    
          print("current key of MenuElements is " .. data.current.index)
          print("current value of MenuElements is " .. data.current.value)
            -- to go back to lastmenu if any
    
            if (data.current == "backup") then --(optional)  if lastmenu is defined
                return  _G[data.trigger](any,any) -- or the function of the last menu
            end
            
        end,

        function(data,menu) -- cancel callback THIS IS OPTIONAL
            -- when menu closes if lastmenu isn't defined
            menu.close(true, true) 
        end,

        function(data, menu) -- change callback THIS IS OPTIONAL 
            -- if theres no previous menu close menu on backspace press
           -- is called when scrolling through the elements, also when the type = "slider" is changed i dont know why.
        end,

        function(data,menu) -- close callback THIS IS OPTIONAL
            -- when menu closes if lastmenu isnt defined
           -- menu.close(showRadar, soundClose) 
        end,
    )
end