Features Overview

Modern UI Design

Oxide Menu features a professional, modern interface with glassmorphic styling.

Themes

Theme	Description
Oxide	Dark glassmorphic with emerald green accent. Backdrop blur, subtle borders, gradient overlays.
Dark	Solid dark theme. Higher contrast, no blur effects.
Light	Light background with dark text. Good for bright environments.

Visual Elements

• Backdrop Blur: Glass-like transparency effect
• Smooth Animations: Slide, fade, or scale transitions
• Hover Effects: Subtle highlighting on item interaction
• Focus States: Clear visual feedback for keyboard navigation
• Typography: Inter font family for clean, readable text

Icons

Oxide Menu supports multiple icon sources:

Source	Example	Description
Font Awesome	fas fa-star	Font Awesome 6 icons
QBCore Items	water	Automatically resolves to inventory image
Custom Images	nui://resource/image.png	NUI protocol paths

-- Font Awesome
{ label = 'Settings', icon = 'fas fa-cog' }

-- QBCore item (auto-resolves)
{ label = 'Water', icon = 'water' }

-- Custom image
{ label = 'Custom', icon = 'nui://my-resource/icon.png' }

Menu Positioning

Menus can be positioned in three locations on the screen.

Positions

Position	Description
'left'	Left side of screen with padding
'center'	Centered horizontally
'right'	Right side of screen with padding

Setting Position

-- Global default in config.lua
Config.Position = 'right'

-- Per-menu override
exports['oxide-menu']:open({
    title = 'Left Menu',
    position = 'left',
    items = { ... }
})

Responsive Behavior

• Menus automatically adjust for different screen resolutions
• Mobile/small screens get full-width menus
• 4K displays scale appropriately

Interactive Elements

Beyond standard buttons, Oxide Menu supports interactive form elements.

Checkboxes

Toggle switches for boolean options.

{
    type = 'checkbox',
    label = 'Enable Notifications',
    description = 'Show alerts for events',
    checked = true,  -- Initial state
}

Features:

• Animated toggle switch
• Visual on/off states
• Real-time state updates
• Event callback on change

Sliders

Range inputs for numeric values.

{
    type = 'slider',
    label = 'Volume',
    min = 0,
    max = 100,
    value = 75,
    step = 5,  -- Optional: increment amount
}

Features:

• Filled track indicator
• Live value display
• Configurable min/max/step
• Real-time value updates
• Theme-aware colors

Text Inputs

Inline text entry fields.

{
    type = 'input',
    label = 'License Plate',
    placeholder = 'Enter plate...',
    value = '',  -- Optional: initial value
}

Features:

• Styled input field
• Placeholder text support
• Submit on Enter key
• Event callback with value

Headers

Non-interactive section labels.

{
    label = 'VEHICLES',
    isHeader = true,
}

Features:

• Distinct styling
• Not selectable/clickable
• Skipped in keyboard navigation
• Preserved in search results

Dividers

Visual separators between sections.

{
    type = 'divider',
}

Search Functionality

Built-in search for filtering menu items.

Configuration

Config.Search = {
    enabled = true,
    minItems = 6,  -- Show search when 6+ items
}

Per-Menu Control

-- Force search on small menu
exports['oxide-menu']:open({
    searchable = true,  -- Always show search
    items = { ... }
})

-- Disable search on large menu
exports['oxide-menu']:open({
    searchable = false,  -- Never show search
    items = { ... }
})

Search Behavior

• Filters by label and description
• Case-insensitive matching
• Headers and dividers always visible
• Maintains original item indices for callbacks
• Search input preserves focus during filtering

Keyboard Navigation

Full keyboard support for menu interaction.

Key Bindings

Key	Action
Arrow Up	Select previous item
Arrow Down	Select next item
Enter	Activate selected item
Backspace	Go back (submenu)
Escape	Close menu

Configuration

Config.Keyboard = {
    enabled = true,
}

Navigation Behavior

• Cycles through enabled items only
• Skips headers, dividers, disabled items
• Visual highlight on selected item
• Auto-scrolls to keep selection visible
• Works alongside mouse interaction

Input Focus

When typing in an input field:

• Arrow keys type in field (not navigate)
• Escape blurs the input
• Enter submits the input

Submenu System

Navigate between menus with history tracking.

Using Submenus

-- Register submenus first
exports['oxide-menu']:register('sub-audio', {
    title = 'Audio Settings',
    items = {
        { type = 'slider', label = 'Volume', min = 0, max = 100, value = 50 },
    }
})

exports['oxide-menu']:register('sub-video', {
    title = 'Video Settings',
    items = {
        { type = 'checkbox', label = 'Fullscreen', checked = true },
    }
})

-- Main menu with submenu references
exports['oxide-menu']:open({
    title = 'Settings',
    items = {
        { label = 'Audio', submenu = 'sub-audio' },
        { label = 'Video', submenu = 'sub-video' },
    }
})

Navigation

• Clicking submenu item opens the submenu
• Back button appears in submenu header
• Backspace key goes back
• History preserved for multiple levels
• Search resets on submenu navigation

QBCore Integration

Seamless integration with QBCore framework.

Item Icon Resolution

When you use a QBCore item name as an icon, it automatically resolves to the inventory image:

-- This:
{ label = 'Water', icon = 'water' }

-- Becomes:
{ label = 'Water', icon = 'nui://qb-inventory/html/images/water.png' }

QBCore Commands

Execute QBCore commands with arguments:

{
    label = 'Give Item',
    qbCommand = 'giveitem',
    args = { item = 'water', amount = 5 }
}

Event Compatibility

All qb-menu events work:

AddEventHandler('qb-menu:client:menuClosed', function()
    -- Still fires for legacy compatibility
end)

Sound Effects

Native GTA V sounds for menu interaction.

Configuration

Config.Sound = {
    enabled = true,
    hover = true,   -- NAV_UP_DOWN sound
    select = true,  -- SELECT sound
    close = true,   -- BACK sound
}

Sound Events

Action	Sound	Soundset
Hover item	NAV_UP_DOWN	HUD_FRONTEND_DEFAULT_SOUNDSET
Select item	SELECT	HUD_FRONTEND_DEFAULT_SOUNDSET
Close menu	BACK	HUD_FRONTEND_DEFAULT_SOUNDSET

Disabling Sounds

-- All sounds
Config.Sound = { enabled = false }

-- Specific sounds
Config.Sound = {
    enabled = true,
    hover = false,  -- No hover sound
    select = true,
    close = true
}

Security Features

Optional security controls for event validation.

Event Whitelisting

When enabled, only whitelisted events can be triggered:

Config.Security = {
    ValidateEvents = true,
    AllowedServerEvents = {
        'shop:buyItem',
        'inventory:useItem',
    },
    AllowedClientEvents = {
        'menu:openSettings',
    },
    AllowedCommands = {
        'inventory',
        'emotes',
    },
}

Icon URL Validation

External URLs are blocked from icon sources:

Allowed	Blocked
nui://resource/img.png	https://external.com/img.png
fas fa-icon	http://malicious.com/img.png
./local/path.png	//protocol-relative.com/img.png
itemname (QBCore)	data:image/png;base64,...

Input Validation

All NUI callbacks validate input structure:

• Type checking on parameters
• Null/undefined handling
• Index validation

Debug Logging

When Config.Debug = true, blocked events are logged:

[oxide-menu] Blocked server: malicious:event

Comparison with qb-menu

Feature	qb-menu	Oxide Menu
Basic menus	Yes	Yes
Headers	Yes	Yes
Icons	Yes	Yes (enhanced)
Themes	No	3 themes
Animations	No	3 types
Search	No	Yes
Keyboard nav	No	Yes
Checkboxes	No	Yes
Sliders	No	Yes
Inputs	No	Yes
Submenus	Limited	Full support
Security	No	Optional whitelist
Callbacks	Limited	Full support