Modern UI

Quick Start

exports.lation_ui:registerMenu({
    id = 'my_menu',
    title = 'My Menu',
    options = {
        {
            title = 'Option 1',
            description = 'This is a menu option',
            icon = 'fas fa-circle',
            onSelect = function()
                print('Option 1 selected')
            end
        },
        {
            title = 'Option 2',
            description = 'Another menu option',
            icon = 'fas fa-star',
            onSelect = function()
                print('Option 2 selected')
            end
        }
    }
})

exports.lation_ui:showMenu('my_menu')

Functions

registerMenu

exports.lation_ui:registerMenu(menuData)

Parameters:

menuData (table) - Menu configuration object (see Registration Options)

showMenu

Display a previously registered menu.

exports.lation_ui:showMenu(menuId)

Parameters:

menuId (string) - Unique identifier of the menu to display

hideMenu

Hide the currently displayed menu.

exports.lation_ui:hideMenu()

getOpenMenu

Get the ID of the currently open menu.

local menuId = exports.lation_ui:getOpenMenu()

Returns:

menuId (string | nil) - The ID of the currently open menu, or nil if no menu is open

Configuration

Registration Options

string

required

Unique menu identifier

string

Menu title (supports markdown)

string

Menu subtitle (supports markdown)

string

FontAwesome icon class or image URLSupported image formats: .png, .webp, .jpg, .jpeg, .gif, .svg

string

default:"#9CA3AF"

Icon color (hex or CSS color name)

string

Icon animation: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake'

Parent menu ID (for back navigation)

boolean

default:"true"

Whether menu can be closed with ESC

string

default:"top-right"

Menu position. Available options: 'top-left', 'top-right', 'offcenter-left', 'offcenter-right'

Submenus will inherit parent menu positioning

function

Function called when menu is closed with ESC

table

required

Array of menu options (see Option Properties)

Option Properties

string

required

Option display text (supports markdown)

string

FontAwesome icon class or image URLSupported image formats: .png, .webp, .jpg, .jpeg, .gif, .svg

string

default:"#71717A"

Icon color (hex or CSS color name)

string

Icon animation typeAvailable options: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake'

string

Option description (supports markdown)

string

Keybind display text

boolean

default:"false"

Whether option is disabled

boolean

default:"false"

Whether option is read-only (no click)

boolean

default:"true"

Whether clicking this option closes the menu (false keeps the menu open)

Submenu ID to open

boolean

default:"false"

Show arrow indicator

Automatically set to true for submenus

number

Progress bar value (0-100)

string

default:"#3B82F6"

Progress bar color (hex or CSS color name)

Can also use colorScheme as an alias

string

URL to an image displayed in the hover metadata

table

Additional information displayed on hover (see Metadata)

function

Callback function executed when option is selected

string

Client event to trigger when option is selected

string

Server event to trigger when option is selected

any

Arguments passed to events

Metadata

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

Structured Array
Key-Value Object
String Array

Recommended approach - Provides the most control over formatting and supports progress bars.

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:

string

required

The label text

any

required

The value to display

number

Progress bar value (0-100)

string

Progress bar color (hex or CSS color name)

Can also use colorScheme as an alias

Simple key-value pairs for basic metadata display.

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

Basic array of strings for simple information display.

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

Weed

Coke

Meth

Chop Shop

Shops Creator

Money Laundering

Metal Detecting

Scuba Diving

Drug Sales

Interact

Modern UI - Menu

Quick Start

Functions

Configuration

Registration Options

Option Properties

Metadata

Preview

​Quick Start

​Functions

​Configuration

​Registration Options

​Option Properties

​Metadata

​Preview

Quick Start

Functions

Configuration

Registration Options

Option Properties

Metadata

Preview