
Radial Menu β
Documentation relating to the jo_radial script.
Soon available
1. Installation β
The jo_radial
script works on all frameworks.
To install jo_radial
:
- Download the library: jo_libs
- Unzip the folder and drop it in your
resources
folder. - Download
jo_radial
from your account. - Unzip the folder and drop it in your
resources
folder. - Add these ensures in your
server.cfg
:ensure jo_libs
ensure jo_radial
Congratulations, the Radial Menu script is ready to be used! π₯³
2. Usage β
Using the radial menu is straightforward. Simply press the configured key (default is F7
, find all the usable controls here) to open the wheel. From there, you can navigate through the different options with your mouse.
- Open/Close: Press the configured
Config.openKey
. - Navigate: Move your mouse over an item to select it.
- Select: Click on an item to trigger its action or open a submenu.
- Submenus: Selecting an item with a
submenu
of typesubmenu
will open a new set of options. - Back/Close: Use the central button to go back to the previous menu or close the wheel entirely. You can also use
ESC
orBACKSPACE
to close it.
3. Configuration β
The main configuration is done in jo_radial/shared/config.lua
. This file allows you to define the menu's appearance, behavior, and content.
General Configuration β
You can modify the menu open/close behavior by changing properties of the Config
table.
Parameter | Type | Description |
---|---|---|
Config.openKey | string | Key to open the menu (default is F7 , find all the usable controls here) |
Config.holdToOpen | boolean | Hold key to open menu (true) or toggle on/off ( false , default) |
You can customize the overall look and feel of the radial menu using the Config.radialConfig
table.
Parameter | Type | Description |
---|---|---|
color | string | Main color for highlights and hover effects (hex color code) |
backText | string | Text for the back button in submenus |
closeText | string | Text for the close button on the main menu |
centerOpacity | float | Opacity of the center background |
logo | string (optional) | Your server's logo. Supports URL (https://... ), local file (logo.png from jo_radial/nui/img/ ), or other script NUI (nui://... ). Set to nil to disable. |
Example :
Config.radialConfig = {
color = "#07a3db",
backText = "Back",
closeText = "Close",
centerOpacity = 0.6,
logo = "https://jumpon-studios.com/images/logo_no_bg.png"
}
Menu Items (Config.radialMenuItems
) β
This is where you define the structure and actions of your radial menu. It's an array of tables, where each table represents an item on the wheel.
Item Structure β
Here is the structure for a single menu item:
Parameter | Type | Description |
---|---|---|
label | string | The text displayed on the menu item. Use βΌ to indicate a submenu. |
icon | string (optional) | The icon to display. Supports three formats: - Local file: weapons.png (from jo_radial/nui/img/ )- Web URL: https://example.com/icon.png - Other script NUI: nui://script_name/icon.png |
hideLabel | boolean (optional) | Show the label within each wheel slice. Defaults to false . |
disabled | boolean | function (optional) | If true , the item is visible but cannot be clicked. A function returning a boolean can be used for dynamic conditions. |
visible | boolean | function (optional) | If false , the item will not be shown. A function can be used for dynamic visibility. |
shouldClose | boolean (optional) | If true , the menu closes after the action. Defaults to true for actions and false for submenus. |
onClick | table (optional) | A table defining the action to take when the item is clicked. See details below. |
submenu | table (optional) | A table defining a submenu. See details below. |
onClick
Object β
Parameter | Type | Description |
---|---|---|
type | string | The type of action. Valid options are: - clientEvent : Triggers a client-side event.- serverEvent : Triggers a server-side event.- command : Executes a client command.- function : Executes a Lua function. |
value | string | function | The event name, command string, or function to be executed. |
args | table (optional) | An array of arguments to pass to a clientEvent or serverEvent . |
submenu
Object β
Parameter | Type | Description |
---|---|---|
type | string | The type of submenu to display. Valid options are: - submenu : Navigates to a new, separate wheel. |
items | table | An array of item tables that make up the content of the submenu. |
Configuration Examples β
WARNING
The preset configuration that comes with the script is provided 'as is'. It is up to you to customize it to fit your server's specific needs and own particularities.
See examples below.
-- ==================================================================================
-- SEE THE FULL DOCUMENTATION HERE : https://docs.jumpon-studios.com/RedM/radial-menu
-- The preset configuration is provided 'as is'. It is up to you to customize it to fit your server's specific needs and own particularities.
-- ==================================================================================
Config = {}
-- Keybind to open the radial menu
Config.openKey = "F7"
-- Hold key to open menu (true) or toggle on/off (false, default)
Config.holdToOpen = false
-- ===== MENU DEFINITIONS =====
-- These are reusable menu definitions that can be referenced in the main menu structure
-- Dynamically created emotes menu (creates 12 emote items)
local emotesMenu = CreateEmotesMenu(12)
-- UI Configuration for the radial menu appearance
Config.radialConfig = {
color = "#ff0000", -- Primary color for the radial menu (hex color)
backText = "Back", -- Text displayed on the back button
closeText = "Close", -- Text displayed on the close button
centerOpacity = 0.6, -- Opacity of the center background
logo = "https://jumpon-studios.com/images/logo_no_bg.png" -- Logo URL displayed in center
}
-- Example menu demonstrating different item types and properties
local exampleMenu = {
{
label = "Dynamic Disabled",
disabled = function()
return true -- Returns true to disable the item (greyed out but visible)
end
},
{
label = "Dynamic Visible",
visible = function()
return false -- Returns false to hide the item completely
end
},
{
label = "Client Event", -- Triggers a client-side event when clicked
onClick = {
type = "clientEvent",
value = "jo_radial:client:test",
args = { "arg1", { test = "arg2" } } -- Optional arguments to pass
}
},
{
label = "disabled",
disabled = true -- Static disabled state (always greyed out)
},
{
label = "Server Event", -- Triggers a server-side event when clicked
onClick = {
type = "serverEvent",
value = "jo_radial:server:test",
args = { "arg1", { test = "arg2" } } -- Optional arguments to pass
}
},
{
label = "Function", -- Executes a Lua function directly when clicked
onClick = {
type = "function",
value = function() print("hello") end
}
},
{
label = "Command", -- Executes a chat command when clicked
onClick = {
type = "command",
value = "openMap"
}
},
}
-- Admin-only menu items for staff functions
-- β οΈVORP ONLY
local adminMenu = {
{
label = "Admin menu", -- Opens the main admin panel
onClick = {
type = "command",
value = "adminMenu"
}
},
{
label = "TPM", -- Teleport to marker command
onClick = {
type = "command",
value = "tpm"
}
},
}
-- Job-specific menu items that show based on player's current job
local jobMenu = {
{
label = "Doctor menu",
visible = function() -- Only visible if player is a doctor
return LocalPlayer.state.Character.Job == "doctor"
end,
onClick = {
type = "command",
value = "doctormenu"
}
},
{
label = "Doctor Alert",
visible = function() -- Only visible if player is a doctor
return LocalPlayer.state.Character.Job == "doctor"
end,
onClick = {
type = "command",
value = "doctorAlert"
}
},
{
label = "Police menu",
visible = function() -- Only visible if player is police
return LocalPlayer.state.Character.Job == "police"
end,
onClick = {
type = "command",
value = "policeMenu"
}
}
}
-- Wagon management options
-- β οΈWorks only if you have https://jumpon-studios.com/redm/horse-stable
local wagonMenu = {
{
label = "Call Wagon", -- Spawns the player's wagon nearby
icon = "nui://jo_libs/nui/menu/assets/images/icons/wagon.png", -- Local NUI resource icon
onClick = {
type = "command",
value = "callWagon"
}
},
{
label = "Flee Wagon", -- Dismisses the current wagon
icon = "https://femga.com/images/samples/ui_textures_no_bg/inventory_items/kit_upgrade_camp_wagon.png", -- External URL icon
onClick = {
type = "command",
value = "fleeWagon"
}
}
}
-- Horse management and interaction options
-- β οΈWorks only if you have https://jumpon-studios.com/redm/horse-stable
local horseMenu = {
{
label = "Call Horse", -- Whistles for the player's horse (simulates whistle key)
icon = "https://femga.com/images/samples/ui_textures_no_bg/inventory_items/generic_horse_equip_stirrup.png",
onClick = {
type = "function", -- Direct function execution
value = function()
SetControlValueNextFrame(0, `INPUT_WHISTLE`, 1.0) -- Simulates whistle input
end
}
},
{
label = "Flee Horse", -- Dismisses the current horse
icon = "nui://jo_libs/nui/menu/assets/images/icons/transferStable.png",
onClick = {
type = "command",
value = "fleeHorse"
}
},
{
label = "Sidesaddle", -- Changes riding style to sidesaddle
icon = "https://femga.com/images/samples/ui_textures_no_bg/inventory_items/generic_horse_equip_saddle.png",
onClick = {
type = "command",
value = "sidesaddle"
}
}
}
-- ===== MAIN RADIAL MENU STRUCTURE =====
-- This is the main menu that appears when the radial menu is opened
-- Items are arranged in a circle and can have actions or submenus
Config.radialMenuItems = {
{
label = "Emotes", -- Character animations and expressions
icon = "emote_dance_carefree_a.webp", -- Local file in nui/img/ directory
submenu = {
type = "submenu", -- Navigate to new wheel level with fade transition
items = emotesMenu -- Reference to the dynamically created emotes menu
}
},
{
label = "Examples", -- Demonstration of different item types and properties
icon = "https://femga.com/images/samples/ui_textures_no_bg/ui_textures_mp/inventory_items_mp/generic_camp_flag.png",
submenu = {
type = "submenu", -- Navigate to new wheel level
items = exampleMenu -- Reference to example menu defined above
}
},
{
label = "Clothes", -- Opens clothing customization system
--β οΈWorks only if you have https://jumpon-studios.com/redm/clothes-wheel
icon = "nui://jo_libs/nui/menu/assets/images/icons/myclothes.png", -- NUI resource path
onClick = {
type = "serverEvent", -- Triggers server-side event
value = "kd_clotheswheel:server:getClothes" -- Event name to trigger
}
},
{
label = "Admin", -- Admin panel access (staff only) β οΈVORP ONLY
icon = "https://femga.com/images/samples/ui_textures_no_bg/ui_textures_mp/mp_online_options/online_options_defensive.png",
visible = function() -- Dynamic visibility based on admin permissions
local VORP = exports.vorp_core:GetCore()
return VORP.Callback.TriggerAwait("vorp_admin:CanOpenStaffMenu", "vorp.staff.OpenMenu")
end,
submenu = {
type = "submenu", -- Navigate to admin menu
items = adminMenu -- Reference to admin menu defined above
}
},
{
label = "Job", -- Job-specific actions and menus
icon = "https://femga.com/images/samples/ui_textures_no_bg/ui_textures_mp/inventory_items_mp/generic_bundle_crafting.png",
submenu = {
type = "submenu", -- Navigate to job menu
items = jobMenu -- Reference to job menu defined above
}
},
{
label = "Call doctor", -- Emergency medical assistance request
icon = "https://femga.com/images/samples/ui_textures_no_bg/ui_textures_mp/inventory_items_mp/kit_role_naturalist_sample_kit.png",
onClick = {
type = "command", -- Executes chat command
value = "callDoctor" -- Command to execute
}
},
{
label = "Call Police", -- Emergency law enforcement request
icon = "https://femga.com/images/samples/ui_textures_no_bg/inventory_items/provision_sheriff_star.png",
onClick = {
type = "command", -- Executes chat command
value = "callPolice" -- Command to execute
}
},
{
label = "Walk style", -- Change character walking animation β οΈVORP ONLY
icon = "emote_dance_formal_a.webp", -- Local file in nui/img/ directory
onClick = {
type = "command", -- Executes chat command
value = "walkanim" -- Command to execute
}
},
{
label = "Wagon", -- Wagon management options
-- β οΈWorks only if you have https://jumpon-studios.com/redm/horse-stable
icon = "nui://jo_libs/nui/menu/assets/images/icons/wagon.png", -- NUI resource path
submenu = {
type = "submenu", -- Navigate to wagon menu
items = wagonMenu -- Reference to wagon menu defined above
}
},
{
label = "Horse", -- Horse management and interaction options
-- β οΈWorks only if you have https://jumpon-studios.com/redm/horse-stable
icon = "nui://jo_libs/nui/menu/assets/images/icons/horse_coat.png", -- NUI resource path
submenu = {
type = "submenu", -- Navigate to horse menu
items = horseMenu -- Reference to horse menu defined above
}
},
{
label = "inventory", -- Quick access to player inventory
icon = "nui://jo_libs/nui/menu/assets/images/icons/satchels.png", -- NUI resource path
onClick = {
type = "function", -- Direct function execution
value = function() -- Simulates the inventory key press
SetControlValueNextFrame(0, `INPUT_QUICK_USE_ITEM`, 1.0)
end
}
}
}
Config = {}
Config.openKey = 'F7' -- Key to open the menu, find all the controls here : https://docs.jumpon-studios.com/jo_libs/modules/raw-keys/client#keys
-- Hold key to open menu (true) or toggle on/off (false, default)
Config.holdToOpen = false
Config.radialConfig = {
color = "#ff0000", -- Main color for highlights and hover effects
backText = "Back", -- Text for the back button in submenus
closeText = "Close", -- Text for the close button on the main menu
centerOpacity = 0.6, -- Opacity of the center background
logo = nil -- Your server's logo. Supports URL (https://...), local file (logo.png from jo_radial/nui/img/), or other script NUI (nui://...). Set to nil to disable.
}
Config.radialMenuItems = {
{
label = "Emotes βΌ",
submenu = {
type = "submenu",
items = CreateEmotesMenu(12) -- Dynamically generated from emotes.lua
}
},
{
label = "Dynamic Disabled",
disabled = function()
return true -- This item will always be disabled
end
},
{
label = "Dynamic Visible",
visible = function()
return false -- This item will never be visible
end
},
{
label = "Client Event",
onClick = {
type = "clientEvent",
value = "jo_radial:client:test",
args = { "arg1", { test = "arg2" } }
}
},
{
label = "Server Event",
onClick = {
type = "serverEvent",
value = "jo_radial:server:test",
args = { "arg1", { test = "arg2" } }
}
},
{
label = "Function",
onClick = {
type = "function",
value = function() print("hello") end
}
},
{
label = "Command",
shouldClose = false, -- Dont't close menu after executing
onClick = {
type = "command",
value = "openMap"
}
},
}
Config = {}
Config.openKey = "F7" -- Key to open the menu
-- Hold key to open menu (true) or toggle on/off (false, default)
Config.holdToOpen = false
-- General configuration for the radial menu's appearance
Config.radialConfig = {
color = "#07a3db", -- Main color for highlights and hover effects
backText = "Back", -- Text for the back button in submenus
closeText = "Close", -- Text for the close button on the main menu
centerOpacity = 0.6, -- Opacity of the center background
logo = "https://jumpon-studios.com/images/logo_no_bg.png" -- Your server's logo. Supports URL (https://...), local file (logo.png from jo_radial/nui/img/), or other script NUI (nui://...). Set to nil to disable.
}
-- An example of a dynamically generated menu from another file
local emotesMenu = CreateEmotesMenu(12) -- This function is defined in shared/data/emotes.lua
-- Define the items for the main radial menu
Config.radialMenuItems = {
-- 1. Simple Action Item: Executes a command and closes the menu.
{
label = "Map",
icon = "map.png", -- Local file from jo_radial/nui/img/
shouldClose = true,
onClick = {
type = "command",
value = "openMap" -- Executes the 'openMap' command
}
},
-- 2. Submenu Example: Navigates to a new wheel for emotes.
{
label = "Emotes βΌ",
icon = "https://example.com/emotes.png", -- Web URL icon
submenu = {
type = "submenu",
items = emotesMenu -- Items are loaded from the emotesMenu variable
}
},
-- 3. Submenu inline Example
{
label = "Actions βΌ",
icon = "nui://another_script/actions.png", -- Icon from another script's NUI
submenu = {
type = "submenu", -- Navigate to submenu
items = {
{
label = "Hands Up",
icon = "hands_up.png", -- Local file
onClick = { type = "function", value = function() print("Hands are up!") end }
},
{
label = "Kneel",
icon = "https://example.com/kneel.png", -- Web URL
onClick = { type = "function", value = function() print("Kneeling.") end }
},
{
label = "Admin Noclip",
icon = "nui://admin_menu/noclip.png", -- Other script NUI
visible = function()
-- Only show this item if the player is an admin
return true -- TODO: Replace with your admin check, e.g., exports.my_admin:isAdmin(source)
end,
onClick = { type = "command", value = "noclip" }
}
}
}
},
-- 4. Deeply Nested Submenu Example
{
label = "Inventory βΌ",
icon = "satchels.png",
submenu = {
type = "submenu",
items = {
{
label = "Food βΌ",
icon = "food.png",
submenu = {
type = "submenu",
items = {
{ label = "Eat Bread", onClick = { type = "clientEvent", value = "inventory:useItem", args = {"bread"} } },
{ label = "Eat Apple", onClick = { type = "clientEvent", value = "inventory:useItem", args = {"apple"} } }
}
}
},
{
label = "Drinks βΌ",
icon = "drinks.png",
submenu = {
type = "submenu",
items = {
{ label = "Drink Water", onClick = { type = "serverEvent", value = "inventory:useItem", args = {"water"} } },
}
}
},
{ label = "Medical", icon = "medical.png", onClick = { type = "clientEvent", value = "inventory:openCategory", args = {"medical"} } }
}
}
},
-- 5. Dynamic & Disabled Item Example
{
label = "Call Horse",
icon = "horse.png",
disabled = function()
-- Example: Disable this if the player's horse is already nearby
local isHorseNear = false -- TODO: Replace with your logic, e.g., isEntityNearby(GetPlayerHorse())
return isHorseNear
end,
onClick = {
type = "clientEvent",
value = "stables:whistle"
}
},
-- 6. Server Event Example
{
label = "Request Help",
icon = "help.png",
onClick = {
type = "serverEvent",
value = "support:requestAdmin",
args = { "Player needs help at their location!" }
}
}
}