pythonpython-3.xtkinterttk

How to remove the arrow from ttk.Menubutton (+ bonusquestion)


I want to style a menubar and I want to remove the menubutton-arrows. I know, I could color them in the same color as the background, but then I also have to do that for any other state (hovering, etc.). It would be far easier to just disable it using style.configure...

For reference, this is the style I am currently using:

class Styles:
    
    @staticmethod
    def apply_theme():
        style = ttk.Style()
        style.theme_use('clam')

    @staticmethod
    def style_menubar(style: ttk.Style):
        background_color = "#130E0B"
        
        style.configure("Menubar.TFrame", 
                        background=background_color)
        
        style.configure("Menu.TMenubutton", 
                        arrowcolor=background_color, 
                        background=background_color,
                        foreground="#EDEDED",
                        activebackground="#5C5C5C", 
                        relief='flat')

and the menubar class:

class Menubar(ttk.Frame):
    def __init__(self, parent):
        super().__init__(parent)

        Styles.style_menubar(ttk.Style())
                
        self.configure(style="Menubar.TFrame")
        self.create_menubar(parent)
    
    def create_menubar(self, root):
        # Create the File menubutton
        file_menubutton = ttk.Menubutton(self, text="File", style="Menu.TMenubutton")
        file_menu = Menu(file_menubutton, tearoff=0)
        file_menu.add_command(label="New")
        file_menu.add_command(label="Open")
        file_menu.add_command(label="Save")
        file_menu.add_separator()
        file_menu.add_command(label="Exit", command=root.quit)
        file_menubutton["menu"] = file_menu
        file_menubutton.pack(side=tk.LEFT, fill=tk.NONE)

        # Additional buttons...

Additional question

How do I make the width of the menubuttons smaller? Currently, there is the text, then a large gap, then the menubutton. Using padding or spacing doesn't help. This would be necessary anyways, when simply recoloring the arrow.

I tried using ipadx, fill=tk.NONE; padding=(0,0), spacing3=0 and activeindicatoron = 0


Solution

  • Unfortunately, tkinter does not provide a direct way to disable the arrows entirely through the style.configure method. So, the best method is to just do as you said.

    def style_menubar(style: ttk.Style):
        background_color = "#130E0B"
        
        style.configure("Menubar.TFrame", 
                        background=background_color)
        
        style.configure("Menu.TMenubutton", 
                        arrowcolor=background_color,  # Same as background to "hide" it
                        background=background_color,
                        foreground="#EDEDED",
                        activebackground="#5C5C5C", 
                        relief='flat',
                        compound="left") #Make it less noticeable
    

    I am including this snippet just because.

    Also, to reduce the width, you can use the anchor method -

    padding=(0, 0),  # Remove internal padding
                        width=10,  # Set fixed width
                        anchor="center")  # Center text within the button
    

    Add this to style.configure