Wheel UI

Circular menu system fully customizable with animations, sound effects, submenus and framework-independent support.

ESX QBCore Standalone

Compatibility

Framework	ESX, QBCore, QBX, Standalone
Language	Lua (client-side)
FiveM	`fx_version 'bodacious'`

Installation

1

Copy the wheel-ui folder into your resources directory

2

Add ensure wheel-ui to your server.cfg

3

Restart your server or use /refresh command

Configuration

Edit config.lua to customize the wheel appearance and behavior:

config.lua

Config = {
    -- Wheel appearance
    wheelSize = 150,           -- Size of the wheel in pixels
    wheelOpacity = 0.95,       -- Opacity (0-1)
    wheelColor = {255, 88, 242}, -- RGB color
    
    -- Animation settings
    animationSpeed = 0.3,      -- Speed of wheel rotation (0-1)
    hoverScale = 1.1,          -- Scale on hover
    
    -- Sound effects
    enableSounds = true,
    hoverSound = 'CONFIRM_BEEP',
    selectSound = 'SELECT',
    
    -- Keyboard controls
    openKey = 'G',             -- Key to open/close wheel
    selectKey = 'RETURN',      -- Key to select item
    
    -- Position
    wheelX = 0.5,              -- X position (0-1, center = 0.5)
    wheelY = 0.5,              -- Y position (0-1, center = 0.5)
}

Usage

Create a wheel menu in your client script:

client.lua

-- Create a wheel menu
local wheelMenu = {
    {
        label = 'Option 1',
        icon = 'fa-car',
        color = {255, 100, 100},
        callback = function()
            print('Option 1 selected')
        end
    },
    {
        label = 'Option 2',
        icon = 'fa-user',
        color = {100, 255, 100},
        callback = function()
            print('Option 2 selected')
        end
    },
    {
        label = 'Option 3',
        icon = 'fa-cog',
        color = {100, 100, 255},
        callback = function()
            print('Option 3 selected')
        end
    }
}

-- Open the wheel
exports['wheel-ui']:openWheel(wheelMenu)

Customization

Each menu item supports the following properties:

Property	Type	Description
`label`	string	Display text for the menu item
`icon`	string	FontAwesome icon class (e.g., 'fa-car')
`color`	table	RGB color table {R, G, B}
`callback`	function	Function to execute on selection
`submenu`	table	Submenu items (optional)

Submenus

Create nested menus with submenu support:

client.lua

local wheelMenu = {
    {
        label = 'Vehicle',
        icon = 'fa-car',
        color = {255, 100, 100},
        submenu = {
            {
                label = 'Spawn Car',
                icon = 'fa-plus',
                callback = function()
                    print('Spawning car...')
                end
            },
            {
                label = 'Delete Car',
                icon = 'fa-trash',
                callback = function()
                    print('Deleting car...')
                end
            }
        }
    }
}

exports['wheel-ui']:openWheel(wheelMenu)

Callbacks & Events

Handle wheel events:

client.lua

-- Listen for wheel closed event
RegisterNetEvent('wheel-ui:closed')
AddEventHandler('wheel-ui:closed', function()
    print('Wheel menu closed')
end)

-- Listen for item selected event
RegisterNetEvent('wheel-ui:itemSelected')
AddEventHandler('wheel-ui:itemSelected', function(label)
    print('Selected: ' .. label)
end)

Styling

Customize the visual appearance of your wheel:

Styling Options

-- Custom styling
local wheelMenu = {
    {
        label = 'Custom Item',
        icon = 'fa-star',
        color = {255, 200, 50},
        textColor = {255, 255, 255},
        fontSize = 14,
        callback = function()
            print('Custom styled item')
        end
    }
}

-- Apply custom theme
exports['wheel-ui']:setTheme({
    backgroundColor = {20, 20, 20},
    borderColor = {88, 101, 242},
    borderWidth = 2,
    cornerRadius = 10
})

Languages

Wheel UI supports multiple languages:

English
Français

Language is automatically detected from your FiveM client settings.