Context menus provide navigation and action selection with hierarchical support

Registration Options

OptionTypeRequiredDefaultDescription
idstringYesnilUnique menu identifier
titlestringNonilMenu title (supports markdown)
subtitlestringNonilMenu subtitle (supports markdown)
menustringNonilParent menu ID (for back navigation)
canClosebooleanNotrueWhether menu can be closed with ESC
optionstableYes{}Array of menu options

Option Properties

OptionTypeRequiredDefaultDescription
titlestringYesnilOption display text (supports markdown)
iconstringNonilFontAwesome icon class or image URL (supports .png, .webp, .jpg, .jpeg, .gif, .svg)
iconColorstringNo'#71717A'Icon color (hex)
iconAnimationstringNonilIcon animation: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake',
descriptionstringNonilOption description (supports markdown)
keybindstringNonilKeybind display text
disabledbooleanNofalseWhether option is disabled
readOnlybooleanNofalseWhether option is read-only (no click)
menustringNonilSubmenu ID to open
arrowbooleanNofalseShow arrow indicator (auto-set for submenus)
progressnumberNonilProgress bar value (0-100)
progressColor or colorSchemestringNo'#3B82F6'Progress bar color (hex)
imagestringNonilURL to an image displayed in the hover metadata
metadatatableNonilAdditional information displayed on hover (see Metadata)
onSelectfunctionNonilCallback function
eventstringNonilClient event to trigger
serverEventstringNonilServer event to trigger
argsanyNonilArguments for events

Metadata

The metadata property displays additional information in a hover card. It supports three formats:

String Array

metadata = {
    "Additional info line 1",
    "Additional info line 2", 
    "Additional info line 3"
}

Key-Value Object

metadata = {
    ["Property 1"] = "Value 1",
    ["Property 2"] = "Value 2",
    ["Status"] = "Active"
}

Structured Array (Recommended)

metadata = {
    { label = "Health", value = "85%" },
    { label = "Armor", value = "100%" },
    { label = "Experience", value = "1,250 XP", progress = 75, progressColor = "#3B82F6" },
    { label = "Level Progress", value = "3/4", progress = 75, progressColor = "#10B981" }
}

Metadata Item Properties

PropertyTypeRequiredDescription
labelstringYesThe label text
valueanyYesThe value to display
progressnumberNoProgress bar value
progressColor or colorSchemestringNoProgress bar color (hex)

Functions

-- Register a menu
exports.lation_ui:registerMenu(menuData)
 
-- Show a registered menu
exports.lation_ui:showMenu(menuId)
 
-- Hide the current menu
exports.lation_ui:hideMenu()
 
-- Get the currently open menu ID
local menuId = exports.lation_ui:getOpenMenu()

Example

-- Register main menu
exports.lation_ui:registerMenu({
    id = 'test_menu',
    title = 'Test Menu',
    subtitle = 'Select an option below',
    options = {
        {
            title = 'Simple',
            description = 'This is a simple menu option',
            icon = 'fas fa-bars',
        },
        {
            title = 'Disabled',
            description = 'This option is disabled',
            icon = 'fas fa-ban',
            iconColor = '#EF4444',
            disabled = true
        },
        {
            title = 'Read-Only',
            description = 'This option is read-only',
            icon = 'fas fa-circle-info',
            iconColor = '#44aae8',
            readOnly = true
        },
        {
            title = 'Progress Bar',
            description = 'This option shows a progress bar',
            icon = 'fas fa-bars-progress',
            progress = 45,
        },
        {
            title = 'Image',
            description = 'This option shows an image',
            icon = 'fas fa-image',
            image = 'https://img.lationscripts.com/lation-scripts-primary.png',
        },
        {
            title = 'Sub Menu',
            description = 'This option opens a sub menu',
            icon = 'fas fa-list',
            menu = 'sub_menu'
        }
    }
})
 
-- Register submenu
exports.lation_ui:registerMenu({
    id = 'sub_menu',
    title = 'Sub Menu',
    subtitle = 'Select an option below',
    menu = 'test_menu', -- Back button to test_menu
    options = {
        {
            title = 'Metadata',
            description = 'This option has metadata',
            icon = 'fas fa-database',
            metadata = {
                { label = 'Label 1', value = 'Value' },
                { label = 'Label 2', value = 69 }
            }
        },
        {
            title = 'onSelect',
            description = 'This option triggers a function',
            icon = 'fas fa-play',
            onSelect = function()
                print('onSelect function triggered')
            end
        },
        {
            title = 'Events',
            description = 'This option triggers a client event',
            icon = 'fas fa-broadcast-tower',
            event = 'resourceName:eventName',
            args = {
                message = 'Hello from sub_menu',
            }
        },
        {
            title = 'Keybind',
            description = 'This can be triggered with a keybind',
            icon = 'fas fa-keyboard',
            keybind = 'F2',
        }
    }
})
 
-- Show menu
exports.lation_ui:showMenu('test_menu')