Context Menu

License: LGPL-3.0 (GNU Lesser General Public License v3.0)

This resource is based on ox_lib which is licensed under LGPL-3.0.

⚠️ This redesign is a paid product. Only verified purchasers are eligible for support and updates. Unverified users will not receive any assistance under any circumstances.

Overview

5 context menu designs available via the ox:context convar. Each design uses theme CSS variables for colors — only the layout and structure differ.

# config.cfg
set ox:context 0

Designs

Design 0 — Default

The original ox_lib context menu. Features a header bar with back/close buttons, scrollable button list with icon, title, description, metadata popover, and arrow indicators.

Theme 0	Theme 1	Theme 2	Theme 3

Design 1 — Section

Clean sectioned layout with numbered items, left accent borders on hover, and grouped items separated by dot dividers every 3 items. Max 9 items visible, hidden scrollbar.

Theme 0	Theme 1	Theme 2	Theme 3

Design 2 — macOS

macOS-style compact context menu (210px). Hover highlights with accent color background and white text. No description text. Separators every 4 items. Max 12 items visible.

Theme 0	Theme 1	Theme 2	Theme 3

Design 3 — Card

Card-based selection list (340px). Each option is a bordered card with title and italic description. Supports progress bars, active/disabled/readOnly states. Max 5 items visible.

Theme 0	Theme 1	Theme 2	Theme 3

Design 4 — Zomboid

Project Zomboid inspired flat menu (220px). Semi-transparent background (50%), uppercase header, no icons, dashed separators, left accent bar on hover. Max 10 items visible.

Theme 0	Theme 1	Theme 2	Theme 3

Usage

Basic Context Menu

lib.registerContext({
    id = 'example_menu',
    title = 'Example Menu',
    options = {
        {
            title = 'Option 1',
            description = 'First option',
            icon = 'circle-info',
            onSelect = function()
                print('Option 1 selected')
            end,
        },
        {
            title = 'Option 2',
            description = 'Second option',
            icon = 'gear',
            onSelect = function()
                print('Option 2 selected')
            end,
        },
    },
})

lib.showContext('example_menu')

Submenu (Nested)

lib.registerContext({
    id = 'sub_menu',
    title = 'Sub Menu',
    menu = 'main_menu',
    options = {
        {
            title = 'Sub Option',
            description = 'Inside submenu',
        },
    },
})

lib.registerContext({
    id = 'main_menu',
    title = 'Main Menu',
    options = {
        {
            title = 'Open Sub Menu',
            description = 'Go deeper',
            icon = 'arrow-right',
            menu = 'sub_menu',
            arrow = true,
        },
    },
})

lib.showContext('main_menu')

With Metadata

lib.registerContext({
    id = 'metadata_menu',
    title = 'Item Info',
    options = {
        {
            title = 'Weapon Stats',
            icon = 'gun',
            metadata = {
                { label = 'Damage', value = '45' },
                { label = 'Range', value = '120m' },
                { label = 'Ammo', value = '30/30' },
            },
        },
    },
})

lib.showContext('metadata_menu')

With Progress

lib.registerContext({
    id = 'progress_menu',
    title = 'Skills',
    options = {
        {
            title = 'Strength',
            icon = 'dumbbell',
            progress = 75,
            colorScheme = 'blue',
        },
        {
            title = 'Stamina',
            icon = 'heart-pulse',
            progress = 50,
            colorScheme = 'green',
        },
    },
})

lib.showContext('progress_menu')

Options Properties

Config

Add to your config.cfg:

# Context menu style (0 = Default, 1 = Section, 2 = macOS, 3 = Card, 4 = Flat)
set ox:context 0