A fully customizable pause menu system for FiveM servers supporting both ESX and QBCore frameworks.
📋 Table of Contents
Framework Configuration
Button System
Hotkeys (Keyboard helper)
Patch Notes System
Money System
Inventory System
Features Configuration
Styling & Customization
Examples & Usage
Troubleshooting
🔧 Framework Configuration
Basic Setup
Configure your framework in shared/config.lua:
ESX Configuration
QBCore Configuration
🔘 Button System
The pause menu supports two types of buttons: Custom Navigation Buttons and Bottom Action Buttons.
Custom Navigation Buttons
Configure in shared/buttons.lua under Config.CustomButtons:
Button Types
System Buttons (type = "system")
action = "resume" - Resume game
action = "map" - Open map
action = "settings" - Open settings
action = "keyboard" - Open keyboard settings
action = "quit" - Quit server
Script Buttons (type = "script")
action = "openInventory" - Open inventory
action = "openSupport" - Custom script function
Custom functions defined in your script
Web Buttons (type = "web")
action = "https://discord.gg/yourserver" - Open Discord
action = "https://yourwebsite.com" - Open website
Any external URL
Content Buttons (type = "content")
Display custom HTML content in the menu
Perfect for rules, guides, information
Content Button Example
Hotkeys (Keyboard helper)
The keyboard helper is a built-in, safe UI section that renders a clickable keyboard, with support for QWERTY/AZERTY and per-key descriptions. Its configuration lives inside the hotkeys button entry (not in shared/config.lua). This avoids risky HTML edits directly in config files.
Add or edit the hotkeys button in shared/buttons.lua:
Notes:
If a key is omitted or its description is empty, it won’t be highlighted or clickable.
The UI will automatically render the keyboard and show a large description box when a highlighted key is clicked.
The spacebar and modifier keys have natural widths, and rows automatically take the full width.
Bottom Action Buttons
Configure in shared/buttons.lua under Config.BottomButtons:
Bottom Button Styles
style = "default" - Standard styling
style = "discord" - Discord purple theme
style = "tiktok" - TikTok black theme
style = "website" - Website blue theme
style = "boutique" - Shop green theme
style = "support" - Support orange theme
style = "quit" - Quit red theme
Bottom Button Example
📝 Patch Notes System
The patch notes system allows you to display update information to players.
Enable Patch Notes
In shared/config.lua:
Configure Patch Notes
In shared/patchnotes.lua:
Adding More Patch Notes
Simply add more patch notes by incrementing the number:
💰 Money System
The money system automatically adapts to your chosen framework.
ESX Money Configuration
Customize in shared/functions.lua:
QBCore Money Configuration
Currency Formatting
In shared/config.lua:
Supported Currencies:
USD (US Dollar)
EUR (Euro)
GBP (British Pound)
JPY (Japanese Yen)
CAD (Canadian Dollar)
AUD (Australian Dollar)
And many more...
🎒 Inventory System
The inventory system automatically detects your framework and opens the appropriate inventory.
ESX Inventory
Default configuration uses ox_inventory:
QBCore Inventory
QBCore inventory opens via server trigger:
Custom Inventory Systems
To use a different inventory system, modify the PauseInventory() function in shared/functions.lua:
⚙️ Features Configuration
General Features
In shared/config.lua:
Advanced Features
🎨 Styling & Customization
UI Customization
The pause menu supports extensive UI customization through CSS and HTML files in the ui/ directory.
Main Files
ui/ui.html - Main HTML structure
ui/css/*.css - Styling files
ui/app.js - JavaScript functionality
ui/images/ - Image assets
Background overlay & opacity
You can control the pause menu background color (overlay) and the slideshow image opacity directly from the configuration.
Add/edit in shared/config.lua:
Notes:
BackgroundColor is applied to the page body. Set it to 'transparent' if you want the game world visible under the menu.
BackgroundOpacity controls the opacity of the rotating images (#background-container). Values are clamped between 0 and 100.
CSS defaults remain in place but are overridden at runtime by these settings.
Button Styling
Bottom buttons support custom styles defined in the configuration:
Available styles:
default - Standard button
discord - Purple Discord theme
tiktok - Black TikTok theme
website - Blue website theme
boutique - Green shop theme
support - Orange support theme
quit - Red quit theme
Custom Content Styling
For content buttons, you can use custom HTML and CSS:
📖 Examples & Usage
Example 1: Basic ESX Setup
Example 2: QBCore with Custom Buttons
Example 3: Custom Money System
Example 4: Multi-Language Support
🔍 Troubleshooting
Common Issues
1. Menu Not Opening
Check if the key binding is correct: Config.Key = 'ESCAPE'
Verify framework configuration matches your server
Ensure all dependencies are started
2. Buttons Not Working
Check button configuration in shared/buttons.lua
Verify button enabled = true
Check console for JavaScript errors
3. Money Not Displaying
Verify framework configuration
Check money function implementation in shared/functions.lua
Ensure player data is loaded
4. Inventory Not Opening
Check inventory system configuration
Verify exports/events for your inventory system
Ensure inventory resource is started
Debug Mode
Enable debug mode for troubleshooting:
Console Commands
Useful commands for debugging:
📞 Support
Getting Help
Check Documentation: Review this README thoroughly
-- ESX Money Functions
function getAccountMoney(xPlayer)
return xPlayer.getMoney() -- or xPlayer.getAccount('cash').money
end
function getBankMoney(xPlayer)
return xPlayer.getAccount('bank').money
end
function getDirtyMoney(xPlayer)
return xPlayer.getAccount('black_money').money
end
-- QBCore Money Functions
function getAccountMoney(Player)
return Player.PlayerData.money.cash
end
function getBankMoney(Player)
return Player.PlayerData.money.bank
end
function getDirtyMoney(Player)
return Player.PlayerData.money.crypto -- or blackmoney
-- Alternative: return Player.Functions.GetItemByName('dirty_money').amount
end
function PauseInventory()
if Config.Framework == "ESX" then
exports.ox_inventory:openInventory()
end
end
function PauseInventory()
if Config.Framework == "QBCORE" then
-- Handled via server trigger
end
end
function PauseInventory()
if Config.Framework == "ESX" then
-- For ESX with custom inventory
exports.your_inventory:openInventory()
-- or TriggerEvent('your_inventory:open')
elseif Config.Framework == "QBCORE" then
-- For QBCore with custom inventory
TriggerEvent('your_inventory:client:openInventory')
end
end
-- Key binding
Config.Key = 'ESCAPE' -- Default key to open pause menu
Config.Name = 'Your Server - Pause Menu' -- KeyMapping display name
-- Discord integration
Config.Discord = 'https://discord.gg/yourserver'
-- Patch notes
Config.UsePatchNotes = true -- Enable patch notes feature
-- shared/config.lua
Config.Framework = "QBCORE"
Config.UsePatchNotes = true
-- shared/buttons.lua
Config.CustomButtons = {
{
id = "discord",
title = "DISCORD",
description = "Join our community",
icon = "fab fa-discord",
type = "web",
action = "https://discord.gg/yourserver",
enabled = true
},
{
id = "rules",
title = "RULES",
description = "Server rules",
icon = "fas fa-book",
type = "content",
action = nil,
enabled = true,
content = [[
<div class="custom-content">
<h2>📋 SERVER RULES</h2>
<ul>
<li>Respect all players</li>
<li>No metagaming</li>
<li>Follow RP guidelines</li>
</ul>
</div>
]]
}
}
-- shared/functions.lua
if Config.Framework == "ESX" then
function getAccountMoney(xPlayer)
return xPlayer.getAccount('cash').money
end
function getBankMoney(xPlayer)
return xPlayer.getAccount('bank').money
end
function getDirtyMoney(xPlayer)
return xPlayer.getAccount('black_money').money
end
end
-- shared/translations.lua
Config.Translate = {
-- English
PlayingTime = "PLAYING TIME",
TotalPlayers = "PLAYERS",
CharacterInfo = "CHARACTER INFO",
-- Add translations for other languages
-- PlayingTime = "TEMPS DE JEU", -- French
-- TotalPlayers = "JOUEURS", -- French
}
-- Add to shared/config.lua
Config.Debug = true
-- Check if menu is open
/lua LocalPlayer.state.openPauseMenu
-- Force open menu
/lua OpenPauseMenu()
-- Check player data
/lua print(json.encode(Framework.PlayerData))