Anyway to yet create a menu inside a menu?
Level 1 - Emotes button for example which then goes to level 2
Level 2 Emotes - Has the emote buttons?
How you do that?
How do you connect ESX?
Can you give me a little hint, please?
Many peoples wait implement this function. We need submenus 
i just need a working menu
- extract radialmenu (dont rename folder) to resource folder
- add radialmenu to server.cfg
- change key for radial menu in config.lua keybind =“F6” (default F6)
start server and enjoy
You can easily implement submenus by getting creative with the Lua file and adding your own commands to show the different submenus.
radialmenu.lua
-- Menu state
local showMenu = false
-- Keybind Lookup table
local keybindControls = {
["ESC"] = 322, ["F1"] = 288, ["F2"] = 289, ["F3"] = 170, ["F5"] = 166, ["F6"] = 167, ["F7"] = 168, ["F8"] = 169, ["F9"] = 56, ["F10"] = 57, ["~"] = 243, ["1"] = 157, ["2"] = 158, ["3"] = 160, ["4"] = 164, ["5"] = 165, ["6"] = 159, ["7"] = 161, ["8"] = 162, ["9"] = 163, ["-"] = 84, ["="] = 83, ["BACKSPACE"] = 177, ["TAB"] = 37, ["Q"] = 44, ["W"] = 32, ["E"] = 38, ["R"] = 45, ["T"] = 245, ["Y"] = 246, ["U"] = 303, ["P"] = 199, ["["] = 39, ["]"] = 40, ["ENTER"] = 18, ["CAPS"] = 137, ["A"] = 34, ["S"] = 8, ["D"] = 9, ["F"] = 23, ["G"] = 47, ["H"] = 74, ["K"] = 311, ["L"] = 182, ["LEFTSHIFT"] = 21, ["Z"] = 20, ["X"] = 73, ["C"] = 26, ["V"] = 0, ["B"] = 29, ["N"] = 249, ["M"] = 244, [","] = 82, ["."] = 81, ["LEFTCTRL"] = 36, ["LEFTALT"] = 19, ["SPACE"] = 22, ["RIGHTCTRL"] = 70, ["HOME"] = 213, ["PAGEUP"] = 10, ["PAGEDOWN"] = 11, ["DELETE"] = 178, ["LEFT"] = 174, ["RIGHT"] = 175, ["TOP"] = 27, ["DOWN"] = 173, ["NENTER"] = 201, ["N4"] = 108, ["N5"] = 60, ["N6"] = 107, ["N+"] = 96, ["N-"] = 97, ["N7"] = 117, ["N8"] = 61, ["N9"] = 118
}
-- Main thread
Citizen.CreateThread(function()
-- Update every frame
while true do
Citizen.Wait(0)
-- Loop through all menus in config
for _, menuConfig in pairs(menuConfigs) do
-- Check if menu should be enabled
if menuConfig:enableMenu() then
-- When keybind is pressed toggle UI
local keybindControl = keybindControls[menuConfig.data.keybind]
if IsControlPressed(0, keybindControl) then
-- Init UI
showMenu = true
SendNUIMessage({
type = 'init',
data = menuConfig.data,
resourceName = GetCurrentResourceName()
})
-- Set cursor position and set focus
SetCursorLocation(0.5, 0.5)
SetNuiFocus(true, true)
-- Play sound
PlaySoundFrontend(-1, "NAV", "HUD_AMMO_SHOP_SOUNDSET", 1)
-- Prevent menu from showing again until key is released
while showMenu == true do Citizen.Wait(100) end
Citizen.Wait(100)
while IsControlPressed(0, keybindControl) do Citizen.Wait(100) end
end
end
end
end
end)
RegisterCommand("submenu1", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu1"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu2", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu2"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu3", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu3"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu4", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu4"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu5", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu5"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
-- Callback function for closing menu
RegisterNUICallback('closemenu', function(data, cb)
-- Clear focus and destroy UI
showMenu = false
SetNuiFocus(false, false)
SendNUIMessage({
type = 'destroy'
})
-- Play sound
PlaySoundFrontend(-1, "NAV", "HUD_AMMO_SHOP_SOUNDSET", 1)
-- Send ACK to callback function
cb('ok')
end)
-- Callback function for when a slice is clicked, execute command
RegisterNUICallback('sliceclicked', function(data, cb)
-- Clear focus and destroy UI
showMenu = false
SetNuiFocus(false, false)
SendNUIMessage({
type = 'destroy'
})
-- Play sound
PlaySoundFrontend(-1, "NAV", "HUD_AMMO_SHOP_SOUNDSET", 1)
-- Run command
ExecuteCommand(data.command)
-- Send ACK to callback function
cb('ok')
end)
config.lua
-- Menu configuration, array of menus to display
menuConfigs = {
['menu'] = {
enableMenu = function()
return true
end,
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
}
}
}
}
}
-- Submenu configuration
subMenuConfigs = {
['submenu1'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 270,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu1_a", "submenu1_b", "submenu1_c", "submenu1_d", "submenu1_e"},
commands = {"submenu1_a", "submenu1_b", "submenu1_c", "submenu1_d", "submenu1_e"}
}
}
}
},
['submenu2'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu2_a", "submenu2_b", "submenu2_c", "submenu2_d", "submenu2_e", "submenu2_f", "submenu2_g", "submenu2_h", "submenu2_i", "submenu2_j"},
commands = {"submenu2_a", "submenu2_b", "submenu2_c", "submenu2_d", "submenu2_e", "submenu2_f", "submenu2_g", "submenu2_h", "submenu2_i", "submenu2_j"}
}
}
}
},
['submenu3'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu3_a", "submenu3_b", "submenu3_c", "submenu3_d", "submenu3_e", "submenu3_f", "submenu3_g", "submenu3_h", "submenu3_i", "submenu3_j"},
commands = {"submenu3_a", "submenu3_b", "submenu3_c", "submenu3_d", "submenu3_e", "submenu3_f", "submenu3_g", "submenu3_h", "submenu3_i", "submenu3_j"}
}
}
}
},
['submenu4'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu4_a", "submenu4_b", "submenu4_c", "submenu4_d", "submenu4_e", "submenu4_f", "submenu4_g", "submenu4_h", "submenu4_i", "submenu4_j"},
commands = {"submenu4_a", "submenu4_b", "submenu4_c", "submenu4_d", "submenu4_e", "submenu4_f", "submenu4_g", "submenu4_h", "submenu4_i", "submenu4_j"}
}
}
}
},
['submenu5'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu5_a", "submenu5_b", "submenu5_c", "submenu5_d", "submenu5_e", "submenu5_f", "submenu5_g", "submenu5_h", "submenu5_i", "submenu5_j"},
commands = {"submenu5_a", "submenu5_b", "submenu5_c", "submenu5_d", "submenu5_e", "submenu5_f", "submenu5_g", "submenu5_h", "submenu5_i", "submenu5_j"}
}
}
}
},
}
18 Likes
Can you give us the screenshot? thanks
someone can tell me how i can make command to back 
i mean back to main menu + use phone
hello would it be possible to do the same thing with / drag [id] / cuff [id]
A cool feature would be if the player could pick his own fav animations. Like a chat command /emotemenu (emote number, emote, emotename) or something in that order and then have a personal wheel for the Individual player
1 Like
Continuing the discussion from [Release] RadialMenu - Configurable menu for chat commands using Wheelnav.js (UPDATED):
hello i got error when i add submenu and not working the vehicle menu
can you fix it?
Open Inventories / Phone / Jobs ???
How can you insert this?
you can modify the cuff script so it arrest the nearest person
Hey just wanna say this scroll menu is a game changer…
Now we can make for every command nice scroll menu…
if on foor or any kinda of transport… building, area etc etc…
it’s kinda limitless …
As i can now disable the default control and set them to just one scroll menu…
All u need for you player to find on just one scoll menu 
[+ 10 for this to sahre]
31 Likes
love it mate well done i stopped using mine
I think this could easily replace the standard M-Menu that a lot of servers use. I still suck at LUA or I’d do it myself, but this would work really well for LEO functions as well such as cuff, drag, seat, unseat etc. I have a design in mind that would work really well but I just can’t execute it :’(
I tried to get all in one menu so it’s all one key one menu. Like for phone/inventory/actions/job menu and so on. Only got the phone to work :’( cos I don’t no how to do a register command
1 Like
if your phone work, look “how” it work and where the register command is, and repeat for your need
i like this very mutch
why ???
So can copy and past it because your can’t figure this simple code out
Cmon dit u even look at the code how he made it for us in the latest update…
It’s easy as F%ck…
Be creative man
CREATE YOUR OWN MENU AND BE PROUD ON YOUR OWN EDIT
1 Like