Godot Version
4.6
Question
Hi everyone !
I try to style a Popup menu to match this style
In this picture, “Corne de Bouftou” is not selectable but the other items are.
Here s my production so far:
The issue I have is that I can’t find how to edit the background panel of the separator (if there is any) to match the dark background of “Corne de Bouftou” in the first picture.
One solution would be to create a custom PopupPanel and add an ItemList, then change the background through code (I just saw the ItemList.set_item_custom_bg_color method)
What are your advices ? Thanks by advance.
mrcdk
July 23, 2026, 11:13am
2
As far as I can tell it’s not possible to change the background of an item in a PopupMenu. You’ll need to build your own one.
Yeah I had to do it myself for those interested here is the script:
@tool
class_name PopupMenuCustom
extends PanelContainer
signal button_pressed(intercation_id: int)
var ui: UI
var interaction_order = [3, 2, 1, 6, 5, 4, 7, 8]
var vbox_container: VBoxContainer
func _init(p_ui: UI) -> void:
ui = p_ui
theme_type_variation = &"PopupMenuCustomBackground"
vbox_container = VBoxContainer.new()
add_child(vbox_container)
vbox_container.add_theme_constant_override("separation", 0)
func _ready() -> void:
position = ui.get_local_mouse_position()
func add_item(p_text: String, action_data: ActionData):
var b = Button.new()
vbox_container.add_child(b)
b.theme_type_variation = &"PopupMenuCustomItemButton"
b.text = p_text
b.alignment = HORIZONTAL_ALIGNMENT_LEFT
b.pressed.connect(func(): Actions.singleton.execute(action_data))
func add_separator(p_text: String):
var l = Label.new()
vbox_container.add_child(l)
l.theme_type_variation = &"PopupMenuCustomNameLabel"
l.text = p_text
func _input(event: InputEvent) -> void:
## Free the menu when clicking outside of it
if event is InputEventMouseButton and \
(event.button_index == MOUSE_BUTTON_LEFT or event.button_index == MOUSE_BUTTON_RIGHT) and \
event.pressed:
if not Rect2(Vector2.ZERO,size).has_point(get_local_mouse_position()):
queue_free()