Radial Menu

Circular pie menu with submenu support, toggled with a keybind.

Client Exports

addRadialItem

Add one or more items to the global radial menu.


exports['trinity-ui']:addRadialItem(items)

Item Properties:

Property	Type	Required	Description
`label`	`string`	Yes	Item label
`icon`	`string`	—	Iconify icon name
`id`	`string`	—	Unique ID (auto-generated if omitted)
`menu`	`string`	—	Submenu ID to open
`onSelect`	`function \| string`	—	Callback or export name
`keepOpen`	`boolean`	—	Keep menu open after selection (default `false`)
`iconWidth`	`number`	—	Icon width override
`iconHeight`	`number`	—	Icon height override

removeRadialItem

Remove a global radial item by its ID.


exports['trinity-ui']:removeRadialItem(id)

clearRadialItems

Remove all global radial items.


exports['trinity-ui']:clearRadialItems()

registerRadial


exports['trinity-ui']:registerRadial(radial)

Property	Type	Required	Description
`id`	`string`	Yes	Submenu identifier
`items`	`table[]`	Yes	Array of radial items

openRadialMenu

Programmatically open the radial menu.


exports['trinity-ui']:openRadialMenu()

closeRadialMenu

Close the radial menu.


exports['trinity-ui']:closeRadialMenu()

disableRadial

Enable or disable the radial menu keybind.


exports['trinity-ui']:disableRadial(state) -- true to disable, false to enable

getCurrentRadialId

Returns the ID of the currently open submenu, or nil.


local id = exports['trinity-ui']:getCurrentRadialId()

Example


-- Add global items
exports['trinity-ui']:addRadialItem({
    {
        id = 'phone',
        label = 'Phone',
        icon = 'fa6-solid:phone',
        onSelect = function()
            print('Opening phone')
        end
    },
    {
        id = 'vehicle_menu',
        label = 'Vehicle',
        icon = 'fa6-solid:car',
        menu = 'vehicle_radial' -- opens submenu
    }
})
 
-- Register a submenu
exports['trinity-ui']:registerRadial({
    id = 'vehicle_radial',
    items = {
        {
            label = 'Lock',
            icon = 'fa6-solid:lock',
            onSelect = function()
                print('Vehicle locked')
            end
        },
        {
            label = 'Engine',
            icon = 'fa6-solid:power-off',
            onSelect = function()
                print('Engine toggled')
            end
        },
        {
            label = 'Trunk',
            icon = 'fa6-solid:box-open',
            onSelect = function()
                print('Trunk opened')
            end
        }
    }
})

The radial menu is opened with the Z key by default. Players can rebind this through FiveM’s keybind settings. Weapon firing is automatically disabled while the menu is open.

Using Export Names

Instead of a function, you can pass an export name as a string to onSelect. This is useful when registering items from different resources:


exports['trinity-ui']:addRadialItem({
    id = 'garage',
    label = 'Garage',
    icon = 'fa6-solid:warehouse',
    onSelect = 'openGarage' -- calls exports[resourceName]:openGarage()
})