> For the complete documentation index, see [llms.txt](https://s1h.gitbook.io/info/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://s1h.gitbook.io/info/resources/s1h_uipack/editable-files/exports/menu.md).

# Menu

***

### openMenu

Opens the interactive menu panel with a list of buttons, inputs, sliders, checkboxes, progress bars, and more.

**You can use it as a fully featured context menu for any interaction — police panels, shops, character menus, admin tools, vehicle actions, etc.**

```lua
exports["s1h_uipack"]:openMenu(menuData, sort, skipFirst)
```

**Parameters :**

| Name      | Type    | Description                                                                        |
| --------- | ------- | ---------------------------------------------------------------------------------- |
| menuData  | table   | Array of menu item tables (see item fields below)                                  |
| sort      | boolean | Sort items alphabetically. Default: `false`                                        |
| skipFirst | boolean | When sorting, keep the first item (the header) pinned at the top. Default: `false` |

**Top-level table options :**

| Name   | Type    | Description                                                     |
| ------ | ------- | --------------------------------------------------------------- |
| search | boolean | Enables the search bar at the top of the menu. Default: `false` |

***

**Menu item fields :**

| Name                         | Type            | Description                                                                                          |
| ---------------------------- | --------------- | ---------------------------------------------------------------------------------------------------- |
| header                       | string          | **(Required)** The main label of the item                                                            |
| txt                          | string          | Sub-label shown below the header                                                                     |
| icon                         | string          | FontAwesome class (`"fas fa-car"`) or an image URL                                                   |
| isMenuHeader                 | boolean         | Turns this item into a non-clickable title row at the top                                            |
| disabled                     | boolean         | Greys out the item — it cannot be clicked                                                            |
| whenclickclose               | boolean         | Closes the menu when this item is clicked. Default: `false` (menu stays open)                        |
| job                          | string \| table | Restricts visibility. String = single job, table = `{ jobName = minGrade }`                          |
| **Progress bar fields**      |                 |                                                                                                      |
| progress                     | number          | 0–100 — shows a filled progress bar inside the item                                                  |
| progressColor                | string          | Overrides the bar color with a hex value (e.g. `"#FF8C00"`)                                          |
| showPercentOnly              | boolean         | Shows only the `%` percentage text, hides the bar                                                    |
| showBarOnly                  | boolean         | Shows only the bar, hides the `%` percentage text                                                    |
| **Interactive input fields** |                 |                                                                                                      |
| isInput                      | boolean         | Text input field. Returned value: `data.input`                                                       |
| isPassword                   | boolean         | Like isInput but masked with `***`. Returned value: `data.input`                                     |
| isDate                       | boolean         | Opens a date picker calendar. Options: `min`, `max` (YYYY-MM-DD format). Returned value: `data.date` |
| isSlider                     | boolean         | Slider input. Options: `min`, `max`, `step`, `defaultValue`, `suffix`. Returned value: `data.slider` |
| isColor                      | boolean         | Color palette picker. Option: `defaultValue` (hex string). Returned value: `data.color`              |
| isCountry                    | boolean         | Searchable country dropdown list. Returned value: `data.select` (ISO code, e.g. `"US"`)              |
| isCheckbox                   | boolean         | On/off toggle switch. `checked = true` to start it enabled. Returned value: `data.checked`           |
| required                     | boolean         | Prevents submission if the input field is empty                                                      |
| **Event trigger fields**     |                 |                                                                                                      |
| params.event                 | string          | Event name to trigger when the item is clicked                                                       |
| params.isServer              | boolean         | If `true`, triggers a server event instead of a client event                                         |
| params.isCommand             | boolean         | If `true`, executes a chat command (`params.event` = command name)                                   |
| params.args                  | table           | Extra data passed to the triggered event handler                                                     |

***

**Full example — all field types :**

```lua
local health  = math.floor((GetEntityHealth(PlayerPedId()) - 100) / 100 * 100)
local armor   = math.floor(GetPedArmour(PlayerPedId()))
local hunger  = 75   -- replace with your framework value
local thirst  = 45   -- replace with your framework value
local veh     = GetVehiclePedIsIn(PlayerPedId(), false)
local engine  = veh ~= 0 and math.floor((GetVehicleEngineHealth(veh) / 1000) * 100) or 0

exports["s1h_uipack"]:openMenu({
    search = true,  -- enables the search bar

    -- ── HEADER ROW ───────────────────────────────────────────────────────────
    {
        header       = "PLAYER STATUS & ACTIONS",
        isMenuHeader = true,
        icon         = "fas fa-layer-group"
    },

    -- ── STANDARD BUTTON ──────────────────────────────────────────────────────
    -- Clicking this triggers a client event (opens a sub-menu in this example)
    {
        header = "Personal Actions",
        txt    = "Open sub-menu",
        icon   = "fas fa-user",
        params = { event = "myScript:client:openSubMenu" }
    },

    -- ── PROGRESS BAR (default color) ─────────────────────────────────────────
    -- Shows a filled bar next to the item using the current theme color
    {
        header   = "Health",
        icon     = "fas fa-heart",
        progress = health,
        params   = { event = "myScript:client:healthInfo" }
    },

    -- ── PROGRESS BAR (custom color) ───────────────────────────────────────────
    -- progressColor overrides the bar color with any hex value
    {
        header        = "Hunger",
        icon          = "fas fa-hamburger",
        progress      = hunger,
        progressColor = "#FF8C00",
        params        = { event = "myScript:client:hungerInfo" }
    },

    -- ── PROGRESS BAR — percent text only ─────────────────────────────────────
    -- Bar is hidden, only shows "75%" for example
    {
        header          = "Thirst",
        icon            = "fas fa-tint",
        progress        = thirst,
        progressColor   = "#1E90FF",
        showPercentOnly = true,
        params          = { event = "myScript:client:thirstInfo" }
    },

    -- ── PROGRESS BAR — bar only ───────────────────────────────────────────────
    -- Percentage text is hidden, only the filled bar is shown
    {
        header      = "Engine Health",
        txt         = "Vehicle damage status",
        icon        = "fas fa-cogs",
        progress    = engine,
        showBarOnly = true,
        params      = { event = "myScript:client:engineInfo" }
    },

    -- ── TEXT INPUT ────────────────────────────────────────────────────────────
    -- Opens a text box. Value arrives as data.input in the event.
    {
        header   = "Check Plate",
        txt      = "Enter the vehicle plate number",
        icon     = "fas fa-car",
        isInput  = true,
        required = true,   -- prevents empty submission
        params   = { event = "myScript:client:checkPlate" }
    },

    -- ── PASSWORD INPUT ────────────────────────────────────────────────────────
    -- Like isInput but characters are hidden (***). Value arrives as data.input.
    {
        header         = "Bank PIN",
        txt            = "Masked input with eye icon",
        icon           = "fas fa-lock",
        isPassword     = true,
        required       = true,
        whenclickclose = true,   -- closes menu after submitting
        params         = { event = "myScript:client:verifyPIN" }
    },

    -- ── DATE PICKER ───────────────────────────────────────────────────────────
    -- Opens a calendar widget. Value arrives as data.date (e.g. "2025-06-15").
    {
        header = "Date of Birth",
        txt    = "Select from calendar",
        icon   = "fas fa-calendar",
        isDate = true,
        min    = "1990-01-01",
        max    = "2029-12-31",
        params = { event = "myScript:client:setDOB" }
    },

    -- ── SLIDER ────────────────────────────────────────────────────────────────
    -- Drag slider between min and max. Value arrives as data.slider.
    {
        header       = "Volume Level",
        txt          = "Adjust music volume",
        icon         = "fas fa-volume-up",
        isSlider     = true,
        min          = 0,
        max          = 100,
        step         = 5,
        defaultValue = 50,
        suffix       = "%",
        params       = { event = "myScript:client:setVolume" }
    },

    -- ── COLOR PICKER ─────────────────────────────────────────────────────────
    -- Opens a hex color palette. Value arrives as data.color (e.g. "#FF0000").
    {
        header       = "Vehicle Color",
        txt          = "Pick from palette or enter hex code",
        icon         = "fas fa-palette",
        isColor      = true,
        defaultValue = "#FF0000",
        params       = { event = "myScript:client:paintVehicle" }
    },

    -- ── COUNTRY SELECTOR ─────────────────────────────────────────────────────
    -- Searchable list of all countries. Value arrives as data.select (ISO code).
    {
        header    = "Select Nationality",
        txt       = "Searchable country list",
        icon      = "fas fa-globe",
        isCountry = true,
        params    = { event = "myScript:client:setNationality" }
    },

    -- ── CHECKBOX (toggle switch) ──────────────────────────────────────────────
    -- On/off switch. Value arrives as data.checked (true/false).
    {
        header     = "VIP Status",
        txt        = "Toggle to activate VIP package",
        icon       = "fas fa-star",
        isCheckbox = true,
        checked    = false,   -- starts in OFF position
        params     = { event = "myScript:client:toggleVIP" }
    },

    -- ── SERVER EVENT with ARGS ────────────────────────────────────────────────
    -- isServer = true sends to the server. args = {} passes extra data.
    {
        header         = "Pay Bill",
        txt            = "$500 will be deducted from your account",
        icon           = "fas fa-file-invoice-dollar",
        whenclickclose = true,
        params         = {
            isServer = true,
            event    = "myScript:server:payBill",
            args     = { amount = 500 }
        }
    },

    -- ── DISABLED ITEM ────────────────────────────────────────────────────────
    -- Greyed out — visible but cannot be clicked
    {
        header   = "Feature Locked",
        txt      = "Not available right now",
        icon     = "fas fa-ban",
        disabled = true
    },

    -- ── JOB RESTRICTED ───────────────────────────────────────────────────────
    -- Visible only to players with the matching job and minimum grade.
    -- Players who match the job but not the grade see it greyed out.
    {
        header = "Chief Command Panel",
        txt    = "Only accessible to rank 4+ police",
        icon   = "fas fa-shield-alt",
        job    = { police = 4 },
        params = { event = "myScript:client:chiefPanel" }
    }
})
```

***

**Receiving values from events :**

```lua
-- Text input / password  →  data.input
RegisterNetEvent("myScript:client:checkPlate", function(data)
    local plate = data.input
    print("Plate searched:", plate)
end)

-- Date picker  →  data.date  (format: "YYYY-MM-DD")
RegisterNetEvent("myScript:client:setDOB", function(data)
    print("Date of birth:", data.date)
end)

-- Slider  →  data.slider  (number)
RegisterNetEvent("myScript:client:setVolume", function(data)
    print("Volume set to:", data.slider)
end)

-- Color picker  →  data.color  (hex string, e.g. "#FF0000")
RegisterNetEvent("myScript:client:paintVehicle", function(data)
    print("Color selected:", data.color)
end)

-- Country selector  →  data.select  (ISO code, e.g. "US", "TR")
RegisterNetEvent("myScript:client:setNationality", function(data)
    print("Country:", data.select)
end)

-- Checkbox  →  data.checked  (boolean)
RegisterNetEvent("myScript:client:toggleVIP", function(data)
    if data.checked then
        print("VIP activated")
    else
        print("VIP deactivated")
    end
end)

-- Server event with args
RegisterNetEvent("myScript:server:payBill", function(data)
    local amount = data.amount   -- from args
    print("Bill paid:", amount)
end)
```

***

### closeMenu

Programmatically closes the currently open menu.

**You can use it to close the menu from inside an event handler, for example after completing an async operation triggered by a menu button.**

```lua
exports["s1h_uipack"]:closeMenu()
```

**Example :**

```lua
AddEventHandler("myScript:client:finishedAction", function()
    exports["s1h_uipack"]:closeMenu()
end)
```

***

### showHeader

Replaces the current menu content with new items without adding to the navigation history stack.

**You can use it to show a loading state, update the menu content dynamically, or swap to a different screen inside the same menu.**

```lua
exports["s1h_uipack"]:showHeader(data)
```

**Parameters :**

| Name | Type  | Description                                          |
| ---- | ----- | ---------------------------------------------------- |
| data | table | Array of menu item tables. Same format as `openMenu` |

**Example :**

```lua
-- Show a loading screen while fetching server data
exports["s1h_uipack"]:showHeader({
    { header = "Loading...", isMenuHeader = true, icon = "fas fa-spinner" }
})

-- After data arrives, replace with real content
exports["s1h_uipack"]:showHeader({
    { header = "LIVE DATA", isMenuHeader = true },
    { header = "Online Players: 48", icon = "fas fa-users" }
})
```

***

### Event: menuClosed

Fired on the client whenever the player closes the menu (by pressing X or the back button).

```lua
AddEventHandler("t1-menu:client:menuClosed", function()
    print("Menu was closed by the player.")
end)
```

***

### Trigger from Server

You can open and close a player's menu directly from a server-side script.

```lua
-- Open menu on a specific player's screen
TriggerClientEvent("t1-menu:client:openMenu", source, menuData, false, false)

-- Close the menu on a specific player's screen
TriggerClientEvent("t1-menu:client:closeMenu", source)
```