Custom Context-Menu UI

Customizing the context-menu system used in Vanguard products.

Customize Context-Menu

---

How to create a Basic Menu

How to create your Menu

1. You need to add this on your menu script.

Menu = Vanguard.GetMenu()

if Menu == "lib" then
    Menu = lib
else
    Menu = Vanguard
end

1. You need to register your menu on a function.

function OpenTestMenu()
    Menu.showContext('test_menu')
end

1. You need to to create your menu.

Menu.registerContext({
    id = 'test_menu', -- Same id/name on Menu.showContext
    title = 'Test Menu', -- Your menu Title
    description = 'New menu for your server', -- Your menu Description (optional)
    canClose = true,  -- This menu can be closed? (Leave true always)
    options = {
        {
            title = 'Option 1', -- Your first option
            icon = 'fa-solid fa-shirt', -- Your option Icon 
            description = 'Click to open option 1', -- Your option description.
            onSelect = function() 
                print("you selected option 1") -- Here you put what this option can do. 
            end,
            canClose = true -- When you click, the menu closes automatically-
        },
        {
            title = 'Option 2',
            icon = 'fa-solid fa-tools',  
            description = 'Click to open option 2',
            onSelect = function()
                print("you selected option 2")
            end,
            canClose = false -- When clicking the menu remains open-
        }
    }
})

Now your menu is ready to work. (Dont forget to create a command or something else to execute the function created.)

ATTENTION! It is necessary to correctly add the Vanguard_Bridge in the fxmanifest for the menus to work. (Also you need to choice Vanguard on menu settings in the bridge.)

shared_scripts { '@Vanguard_Bridge/imports.lua' }

normal menu without selecting anything.

with mouse animation on selecting

How to create a Menu with subMenus

How to create your Menu with subMenus

1. You need to add this on your menu script.

Menu = Vanguard.GetMenu()

if Menu == "lib" then
    Menu = lib
else
    Menu = Vanguard
end

1. You need to register your menu and subMenu function.

function OpenTestMenu()
    Menu.showContext('test_menu') -- Main Menu
end

-- Function to open the sub menu 1
function OpenTestMenu1()
    Menu.showContext('test_menu_1') -- SubMenu 1
end

1. You need to to create your Menu and subMenu.

-- MAIN MENU 
Menu.registerContext({
    id = 'test_menu', -- Same id/name on Menu.showContext
    title = 'Test Menu', -- Your menu Title
    description = 'New menu for your server', -- Your menu Description (optional)
    canClose = true,  -- This menu can be closed? (Leave true always)
    options = {
        {
            title = 'Option 1', -- Your first option
            icon = 'fa-solid fa-shirt', -- Your option Icon 
            description = 'Click to open option 1', -- Your option description.
            onSelect = function() 
                print("you selected option 1") -- Here you put what this option can do. 
            end,
            canClose = true -- When you click, the menu closes automatically-
        },
        {
            title = 'Option 2',
            icon = 'fa-solid fa-tools',  
            description = 'Click to open option 2',
            onSelect = function()
                print("you selected option 2")
            end,
            canClose = false -- When clicking the menu remains open-
        }
    }
})

-- SUB MENU
Menu.registerContext({  -- MAIN MENU
    id = 'test_menu_1', -- Same id/name on Menu.showContext
    title = 'Test Menu 1', -- Your menu Title
    description = 'New menu for your server', -- Your menu Description (optional)
    menu = "test_menu", -- NEW same id/name on your same main menu
    canClose = true,  -- This menu can be closed? (Leave true always)
    options = {
        {
            title = 'Option 3', -- Your first option
            icon = 'fa-solid fa-shirt', -- Your option Icon 
            description = 'Click to open option 3', -- Your option description.
            onSelect = function() 
                print("you selected option 3") -- Here you put what this option can do. 
            end,
            canClose = true -- When you click, the menu closes automatically-
        },
        {
            title = 'Option 4',
            icon = 'fa-solid fa-tools',  
            description = 'Click to open option 4',
            onSelect = function()
                print("you selected option 4")
            end,
            canClose = false -- When clicking the menu remains open-
        }
    }
})

Now your menu is ready to work. (Dont forget to create a command or something else to execute the function created.)

ATTENTION! It is necessary to correctly add the Vanguard_Bridge in the fxmanifest for the menus to work.

shared_scripts { '@Vanguard_Bridge/imports.lua' }

normal menu without selecting anything.

with mouse animation on selecting