Jump On Docs

Appearance

JO Menu ​

A client side library to use the JO Menu in your scripts.
JO Menu is a NUI menu fully optimized and mouse and keyboard ready.

Usage ​

Download an example of menu resource

Constructor ​

Client jo.menu.create() ​

Create a new menu

Syntax ​

lua
jo.menu.create(id, data)

Parameters ​

id : string

Unique ID of the menu

data : table Optional

Menu configuration data

data.type : string - The type of menu tile or list
default tile

data.title : string - The big title of the menu The menu title Optional

data.subtitle : string - The subtitle of the menu The subtitle

data.numberOnScreen : integer - Only for list menu, Maximum number of items visibles at the same time
default : 8 Optional

data.numberOnLine : integer - Only for tile menu, Maximum number of items visibles at the same time
default : 4 Optional

data.numberLineOnScreen : integer - Only for tile menu, Maximum number of lines visibles at the same time
default : 6 Optional

data.distanceToClose : float - Distance at which the menu will self close if the player is moving away
default: false

data.displayBackButton : boolean - Whether to display the back button
default: false

data.onEnter : function - Fired when the menu is opened Optional

data.onBack : function - Fired when the backspace/Escape is pressed Optional

data.onExit : function - Fired when the menu is exited Optional

data.onTick : function - Fired every tick Optional

Return Value ​

Type : MenuClass

The newly created menu object

Add an item to a menu

Syntax ​

lua
MenuClass:addItem(index, item)

Parameters ​

index : integer|table

Position index or item table if used as single parameter

[item](#item-methods) : table Optional

The item to add - if not provided, p is used as the item

[item](#item-methods).title : string - The item label

[item](#item-methods).child : string - The menu to open when Enter is pressed
default: false Optional

[item](#item-methods).visible : boolean - If the item is visible in the menu
default: true Optional

[item](#item-methods).data : table - Variable to store custom data in the item Optional

[item](#item-methods).description : string - Description text for the item Optional

[item](#item-methods).prefix : string - The little icon before the title from nui\menu\assets\images\icons folder prefix Icon Optional

[item](#item-methods).icon : string - The left icon filename from nui\menu\assets\images\icons folder, or full image URL Icon Optional

[item](#item-methods).iconRight : string - The right icon filename from nui\menu\assets\images\icons folder icon right Optional

[item](#item-methods).iconClass : string - CSS class for the icon Optional

[item](#item-methods).price : table - The price of the item. Use 0 to display "free"
default: false preview price Optional

[item](#item-methods).price.money : number - The price in $ Optional

[item](#item-methods).price.gold : number - The price in gold Optional

[item](#item-methods).priceTitle : string - Replace the "Price" label Optional

[item](#item-methods).priceRight : boolean - Display the price at the right of the item title price to the right Optional

[item](#item-methods).statistics : table - List of statistics to display for the item Optional

[item](#item-methods).disabled : boolean - If the item is disabled (grey) in the menu disable item Optional

[item](#item-methods).textRight : string - The label displayed at the right of the item Right text Optional

[item](#item-methods).previewPalette : boolean - Display a color square at the right of the item
default: true preview palette Optional

[item](#item-methods).sliders : table - List of sliders for the item Optional

[item](#item-methods).onActive : function - Fired when the item is selected Optional

[item](#item-methods).onClick : function - Fired when Enter is pressed on the item Optional

[item](#item-methods).onChange : function - Fired when a slider value changes Optional

[item](#item-methods).onExit : function - Fired when the item is exited Optional

[item](#item-methods).onTick : function - Fired every tick Optional

Return Value ​

Type : MenuItemClass

The added item

Syntax ​

lua
MenuClass:deleteItem(index)

Delete a specific property of a menu. Requires MenuClass:push() to be called to apply the changes

Syntax ​

lua
MenuClass:deleteValue(keys)

Parameters ​

keys : string|table

The list of property name to access to the value

Push the updated values to the NUI layer

Syntax ​

lua
MenuClass:push()

Refresh all the menu without changing the current state
Used when you want rebuild the menu

Syntax ​

lua
MenuClass:refresh()

Remove an item from a menu by its index. Requires MenuClass:push() to be called to apply the changes

Syntax ​

lua
MenuClass:removeItem(index)

Parameters ​

index : integer

The index of the item to remove

Reset the menu to its initial state
Moves the cursor back to the first item

Syntax ​

lua
MenuClass:reset()

Send the menu data to the NUI layer

Syntax ​

lua
MenuClass:send()

Change the current active item index

Syntax ​

lua
MenuClass:setCurrentIndex(index)

Parameters ​

index : integer

The item index to switch to

Sort menu items alphabetically by title

Syntax ​

lua
MenuClass:sort(first, last)

Parameters ​

first : integer Optional

Position of the first element to sort
default: 1

last : integer Optional

Position of the last element to sort
default: #self.[item](#item-methods)s

Update a specific property of a menu item

Syntax ​

lua
MenuClass:updateItem(index, key, value)

Parameters ​

index : integer

The index of the item to update

key : string

The property name to update

value : any

The new value for the property

Update a specific property of a menu. Requires MenuClass:push() to be called to apply the changes

Syntax ​

lua
MenuClass:updateValue(keys, value)

Parameters ​

keys : string|table

The list of property name to access to the value

value : any

The new value

Return Value ​

Type : boolean

true if the update was successful, false otherwise

Set this menu as the current active menu

Syntax ​

lua
MenuClass:use(keepHistoric, resetMenu)

Parameters ​

keepHistoric : boolean Optional

Whether to keep navigation history
default: true

resetMenu : boolean Optional

Whether to reset the menu state
default: true

Delete a specific property of a menu item. Requires MenuClass:push() to be called to apply the changes

Syntax ​

lua
MenuItem:deleteValue(keys)

Parameters ​

keys : string|table

The list of property name to access to the value

Get the parent menu of the item

Syntax ​

lua
MenuItem:getParentMenu()

Return Value ​

Type : MenuClass

The parent menu

Update a specific property of a menu item. Requires MenuClass:push() to be called to apply the changes

Syntax ​

lua
MenuItem:updateValue(keys, value)

Parameters ​

keys : string|table

The property name to update

value : any

The new value for the property

item Methods ​

Client item:getParentMenu() ​

Syntax ​

lua
item:getParentMenu()

JO Functions ​

Client jo.menu.addItem() ​

Add an item to a menu by its ID

Syntax ​

lua
jo.menu.addItem(id, p, item)

Parameters ​

id : string

The menu ID

p : integer|table

Position index or item table if used as single parameter

[item](#item-methods) : table Optional

The item to add - if not provided, p is used as the item

[item](#item-methods).title : string - The item label

[item](#item-methods).child : string - The menu to open when Enter is pressed
default: false Optional

[item](#item-methods).visible : boolean - If the item is visible in the menu
default: true Optional

[item](#item-methods).data : table - Variable to store custom data in the item Optional

[item](#item-methods).description : string - Description text for the item Optional

[item](#item-methods).prefix : string - The little icon before the title from nui\menu\assets\images\icons folder prefix Icon Optional

[item](#item-methods).icon : string - The left icon filename from nui\menu\assets\images\icons folder Icon Optional

[item](#item-methods).iconRight : string - The right icon filename from nui\menu\assets\images\icons folder icon right Optional

[item](#item-methods).iconClass : string - CSS class for the icon Optional

[item](#item-methods).price : table - The price of the item. Use 0 to display "free"
default: false preview price Optional

[item](#item-methods).price.money : number - The price in $ Optional

[item](#item-methods).price.gold : number - The price in gold Optional

[item](#item-methods).priceTitle : string - Replace the "Price" label Optional

[item](#item-methods).priceRight : boolean - Display the price at the right of the item title price to the right Optional

[item](#item-methods).statistics : table - List of statistics to display for the item Optional

[item](#item-methods).disabled : boolean - If the item is disabled (grey) in the menu disable item Optional

[item](#item-methods).textRight : string - The label displayed at the right of the item Right text Optional

[item](#item-methods).previewPalette : boolean - Display a color square at the right of the item
default: true preview palette Optional

[item](#item-methods).sliders : table - List of sliders for the item Optional

[item](#item-methods).onActive : function - Fired when the item is selected Optional

[item](#item-methods).onClick : function - Fired when Enter is pressed on the item Optional

[item](#item-methods).onChange : function - Fired when a slider value changes Optional

[item](#item-methods).onExit : function - Fired when the item is exited Optional

Client jo.menu.createIfNotExist() ​

Create a new menu if it doesn't exist

Syntax ​

lua
jo.menu.createIfNotExist(id, data)

Parameters ​

id : string

Unique ID of the menu

data : table Optional

Menu configuration data

Return Value ​

Type : boolean

Returns true if the menu was created

Client jo.menu.delete() ​

Delete a menu from memory

Syntax ​

lua
jo.menu.delete(id)

Parameters ​

id : string

The menu ID to delete

Client jo.menu.displayLoader() ​

A function to display the loader

Syntax ​

lua
jo.menu.displayLoader(value)

Parameters ​

value : boolean Optional

Whether to display the loader
default: true

Client jo.menu.doesActiveButtonChange() ​

Check if the active button has changed since last update

Syntax ​

lua
jo.menu.doesActiveButtonChange()

Return Value ​

Type : boolean

Returns true if the active button has changed

Client jo.menu.fireAllLevelsEvent() ​

Fire an event across all menu levels (current menu and current item)

Syntax ​

lua
jo.menu.fireAllLevelsEvent(eventName, ...)

Parameters ​

eventName : string

The name of the event to fire

... : any Optional

Additional arguments to pass to the event handlers

Client jo.menu.fireEvent() ​

Fire an event for a specific menu item

Syntax ​

lua
jo.menu.fireEvent(item, eventName, ...)

Parameters ​

[item](#item-methods) : table

The item to trigger the event on

eventName : string

The name of the event to fire

... : any Optional

Additional arguments to pass to the event handler

Client jo.menu.forceBack() ​

Force the menu to go back to the previous menu

Syntax ​

lua
jo.menu.forceBack()

Client jo.menu.get() ​

Get a menu instance by its ID

Syntax ​

lua
jo.menu.get(id)

Parameters ​

id : string

The menu ID

Return Value ​

Type : MenuClass

The menu object

Client jo.menu.getCurrentData() ​

Get data about the current menu state

Syntax ​

lua
jo.menu.getCurrentData()

Return Value ​

Type : table

Current menu data including menu ID and selected item

Client jo.menu.getCurrentIndex() ​

A function to get the current index

Syntax ​

lua
jo.menu.getCurrentIndex()

Return Value ​

Type : integer

The index of the current item

Client jo.menu.getCurrentItem() ​

Get the currently selected menu item

Syntax ​

lua
jo.menu.getCurrentItem()

Return Value ​

Type : table

The currently selected item

Client jo.menu.getCurrentMenu() ​

Get the currently active menu

Syntax ​

lua
jo.menu.getCurrentMenu()

Return Value ​

Type : MenuClass

The currently active menu

Client jo.menu.getCurrentMenuId() ​

A function to get the current menu id

Syntax ​

lua
jo.menu.getCurrentMenuId()

Return Value ​

Type : string

The id of the current menu

Client jo.menu.getPreviousData() ​

Get data about the previous menu state

Syntax ​

lua
jo.menu.getPreviousData()

Return Value ​

Type : table

Previous menu data including menu ID and selected item

Client jo.menu.hideLoader() ​

A function to hide the loader

Syntax ​

lua
jo.menu.hideLoader()

Client jo.menu.isCurrentMenu() ​

A function to know if the menu is the current one

Syntax ​

lua
jo.menu.isCurrentMenu(id)

Parameters ​

id : string

The menu id

Return Value ​

Type : boolean

Client jo.menu.isExist() ​

Check if a menu exist

Syntax ​

lua
jo.menu.isExist(id)

Parameters ​

id : string

the menu ID

Return Value ​

Type : boolean

Returns true if the menu exists

Client jo.menu.isOpen() ​

Check if any menu is currently open

Syntax ​

lua
jo.menu.isOpen()

Return Value ​

Type : boolean

Returns true if a menu is open

Client jo.menu.isSoftHidden() ​

Syntax ​

lua
jo.menu.isSoftHidden()

Client jo.menu.missingMenuHandler() ​

Register a handler for missing menu error

Syntax ​

lua
jo.menu.missingMenuHandler(id, callback)

Parameters ​

id : string

The menu ID

callback : function

The handler function

Client jo.menu.onChange() ​

Register a callback function for menu change events

Syntax ​

lua
jo.menu.onChange(cb)

Parameters ​

cb : function

The callback function to register

Client jo.menu.playAudio() ​

A function to play a NUI sound

Syntax ​

lua
jo.menu.playAudio(sound)

Parameters ​

sound : string

Client jo.menu.refresh() ​

Refresh a menu by its ID

Syntax ​

lua
jo.menu.refresh(id)

Parameters ​

id : string

The menu ID to refresh

Client jo.menu.reset() ​

Reset a menu by its ID

Syntax ​

lua
jo.menu.reset(id)

Parameters ​

id : string

The menu ID to reset

Client jo.menu.runRefreshEvents() ​

A function to fire menu and items events

Syntax ​

lua
jo.menu.runRefreshEvents(menuEvent, itemEvent)

Parameters ​

menuEvent : boolean Optional

Whether to run menu events

[item](#item-methods)Event : boolean Optional

Whether to run item events

Client jo.menu.send() ​

Send a menu to the NUI layer by its ID

Syntax ​

lua
jo.menu.send(id)

Parameters ​

id : string

The menu ID

Client jo.menu.set() ​

Set or replace a menu instance

Syntax ​

lua
jo.menu.set(id, menu)

Parameters ​

id : string

The menu ID

menu : MenuClass

The menu object to set

Client jo.menu.setCurrentMenu() ​

Set a menu as the current active menu

Syntax ​

lua
jo.menu.setCurrentMenu(id, keepHistoric, resetMenu)

Parameters ​

id : string

ID of the menu to activate

keepHistoric : boolean Optional

Keep the menu navigation history
default: true

resetMenu : boolean Optional

Clear and redraw the menu before displaying
default: true

Client jo.menu.show() ​

Show or hide a menu

Syntax ​

lua
jo.menu.show(show, keepInput, hideRadar, playMenuAnimation, hideCursor)

Parameters ​

show : boolean

Whether to show or hide the menu

keepInput : boolean Optional

Whether to keep game input controls active
default: true

hideRadar : boolean Optional

Whether to hide the radar when menu is shown
default: true

playMenuAnimation : boolean Optional

Whether to use animation when showing/hiding the menu
default: true

hideCursor : boolean Optional

Whether to hide the cursor
default: false

Client jo.menu.softHide() ​

A function to hide temporary the menu and do action

Syntax ​

lua
jo.menu.softHide(cb, playMenuAnimation, keepBackground)

Parameters ​

cb : function

Action executed before show again the menu

playMenuAnimation : boolean Optional

Whether to use animation when showing/hiding the menu
default: true

Client jo.menu.sort() ​

Sort menu items alphabetically by title using menu ID

Syntax ​

lua
jo.menu.sort(id, first, last)

Parameters ​

id : string

The menu ID

first : integer Optional

Position of the first element to sort
default: 1

last : integer Optional

Position of the last element to sort
default: #self.[item](#item-methods)s

Client jo.menu.updateItem() ​

Update a specific property of a menu item by menu ID

Syntax ​

lua
jo.menu.updateItem(id, index, key, value)

Parameters ​

id : string

The menu ID

index : integer

The index of the item to update

key : string

The property name to update

value : any

The new value for the property

Client jo.menu.updateLang() ​

Update menu language text

Syntax ​

lua
jo.menu.updateLang(lang)

Parameters ​

lang : table

List of translated strings

lang.of : string - The bottom right text displaying current item number
default : "%1 of %2" Optional

lang.selection : string - The "Selection" text
default : "Selection" Optional

lang.devise : string - The devise text
default : "$" Optional

lang.number : string - The number text
default : "Number %1" Optional

lang.free : string - The "Free" text
default : "Free" Optional

lang.variation : string - The variatio, text
default : "Variation" Optional

Client jo.menu.updateVolume() ​

Set the volume level for menu sound effects

Syntax ​

lua
jo.menu.updateVolume(volume)

Parameters ​

volume : number

Volume of sound effects 0.0 to 1.0

Variables ​

CurrentData ​

The argument pass on each function

keys ​

CurrentData.menu : string

The unique ID of the menu

CurrentData.item : table

The item active in the menu

New assets ​

Add a new icon ​

Add you .png file in the nui\menu\assets\images\icons folder

Item variations ​

Sliders ​

4 types of sliders are available on the menu: Default, Grid, Palette & Switch.
You can use multiples sliders on the same item.
Use currentData.item.sliders[X].value to get the current value of the slider.
Here is an example of an item with sliders of the 4 types:

Default ​

The default slider based on the original game design. Useful to choose between item variations like clothes. The default slider

Syntax ​

lua
{title = "", current = 1, values = {item1,item2,..}}

Keys ​

title : string

The label on the top of variations

current : integer

The current item selected

values : table

The table of item variations. 1 entry = 1 rectangle

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  sliders = {
    {
      title = 'Variations',
      current = 2,
      values = {
        "value1",
        { var = 4 },
        { yourKey = "your Value" },
        'value2',
        5,
        10,
      }
    },
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Grid ​

The grid slider is useful to define a value between a min and max value.
You can use one or two dimensions of slider.
One dimension: The grid slider one dimension Two dimensions: The grid slider two dimensions

TIP

To get the values of the slider, .value is a table with two arguments:
currentData.item.sliders[X].value[1] for the horizontal axe (or for one dimension slider)
currentData.item.sliders[X].value[2] for the vertical axe

Syntax ​

lua
{type = "grid", labels = {'left','right','up','down'}, values = {
  {current = 0.5,max = 1.0, min = -1.0, gap = 0.01},
  {current = 0.5,max = 10.0, min = 0.0, gap = 0.01}, --for two dimensions
}}

Keys ​

type : string

The type of slider

labels : table

The 4 labels in the order : left, right, top, bottom

values : table

The slider definitions.
1 entry = 1 dimension slider
2 entries = 2 dimensions sliders values[x].current : float - the current value of the slider values[x].min : float - the minimal value (cursor on the full left/top) values[x].max : float - the minimal value (cursor on the full right/bottom)

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  sliders = {
    {
      type = "grid",
      labels = { 'left', 'right', 'up', 'down' },
      values = {
        { current = 0.5, max = 1.0,  min = -1.0 },
        { current = 0.5, max = 10.0, min = 0.0 }, --for two dimensions
      }
    },
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Palette ​

The palette slider is useful to select a color.
The palette slider

Syntax ​

lua
{type = "palette", title = "tint", tint = "tint_makeup", max = 63, current = 14}

Keys ​

type : string

The type of slider

title : table

The top label on the slider

tint : string

The name of the gradient :
"tint_generic_clean", "tint_hair", "tint_horse", "tint_horse_leather", "tint_leather" & "tint_makeup"

max : integer

The number of varations

current : integer

The current variation

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  sliders = {
    { type = "palette", title = "tint", tint = "tint_makeup", max = 63, current = 14 }
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Switch ​

The switch slider is display on the right of the item label.
The switch slider

Syntax ​

lua
{type = "switch", current = 1, values = {
  {label = "", data = {}},
  {label = "", data = {}}
}}

Keys ​

type : string

The type of slider

current : integer

The current variation

values : table

The list of variations
values[x].label is the label displayed

Example ​

lua
local menu = jo.menu.create('menu1',{})
menu:addItem({
  title = "Item",
  sliders = {
    { type = "switch", current = 1, values = {
      {label = "value 1", myKey = 4},
      {label = "value 2", data = "what you want"}
    }
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Statistics ​

Statistics table is displayed at the bottom of the menu. 5 types of statistics are available: Bar, Bar-style, Icon, Texts and Weapon-bar
Multiple statistics can be use for the same item.
Here is an example of an item with 5 statistics of the 5 types:

Bar ​

A statistic with 10 barsStatistic bar preview

Syntax ​

lua
{label = "", type = "bar", value = {current,max}}

Keys ​

label : string

the left label

type : string

value : table

For the left to the right, current are white, max are grey, all the rest is dark grey
value.current : integer (0<>10 - the number of white bar
value.max : integer (0<>10 - the number of grey bar

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  statistics = {
    { label = "The label", type = "bar", value = { 3, 8 } }
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Bar-style ​

A statistic with unlimted bar defined with CSS classes Statistic bar preview with CSS classes

Syntax ​

lua
{label = "", type = "bar-style", value = {'','',''}}

Keys ​

label : string

the left label

type : string

value : table

A list of string to define the CSS classes of bar, 1 string = 1 bar
If the string is empty, the bar is dark grey. CSS classes:

  • active : Opacity = 1
  • fgold : Gold
  • fred : Red
  • possible : Opacity = 0.5

CSS classes can be combinated

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  statistics = {
    {
      label = "The label",
      type = "bar-style",
      value = {
        "active",      --the 1st bar: opacity = 1
        "active fgold", --the 2nd bar: opacity = 1 + gold
        "active fred", --the 3rd bar: opacity = 1 + red
        "possible fred", --the 4th bar: opacity = 0.5 + red
        "possible",    --the 4th bar: opacity = 0.5
        "",            --the 5th bar: opacity = 0.2
      }
    },
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Icon ​

A statistic with icons on the right Statistics with icons

Syntax ​

lua
{label = "", type = "icon", value = {{icon = '', opacity = 1.0}}}

Keys ​

label : string

the left label

type : string

value : table

A list of table to define the icon from left to right, 1 table = 1 icon
icon : string - Icon filename from nui\menu\assets\images\icons\ folder
opacity : float (0.0<>1.0) - The opacity of the icon

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  statistics = {
    {
      label = "The label",
      type = "icon",
      value = {
        { icon = "player_health", opacity = 1 }, --the 1st icon
        { icon = "player_health", opacity = 0.75 }, --the 2nd icon
        { icon = "player_health", opacity = 0.3 } --the 3rd icon
      }
    },
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Texts ​

Basic statistic with two labels Basic statistics

Syntax ​

lua
{label = "", value = ""}

Keys ​

label : string

The left label

value : string

The right label

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  statistics = {
    { label = "The label", value = "The value" }
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Weapon-bar ​

A statistic with the weapon bar design. Useful to display a percent of completion Statistics with weapon bar design

Syntax ​

lua
{label = "", type="weapon-bar", value = {current,max}}

Keys ​

label : string

The left label

type : string

value : table

The percent of completion is calculated by value.current\value.max
value.current : float - the current value of the statistic
value.max : float - the max value the statistic can reach

Example ​

lua
local menu = jo.menu.create('menu1', {})
menu:addItem({
  title = "Item",
  statistics = {
    { label = "The label", type = "weapon-bar", value = { 60, 100 } }
  }
})
menu:send()
jo.menu.setCurrentMenu('menu1')
jo.menu.show(true)

Last updated:

Copyright © 2017-2025 Jump On