Is there anyway to implement a Menu Bar inside the Title Bar?

[LucianoSaldivia]

In a professional looking app like Visual Studio Code, you'd have this menu bar:

implemented inside the title bar:

I've been searching everywhere, and while you can start with overrideredirect(True), there are many issues when trying to implement something like this with basic widgets.

No other GUI package has this ability.
If someone knows how to implement something as shown in the images, please let me know how.

[ElectricCandlelight]

Could try using on enter on a label that then places a frame below it with the menu items, then on leave for the frame to remove it.

[LucianoSaldivia]

I'm asuming you mean "<Enter>" and "<Leave>" events. I've tried a similar approach, but i don't want the whole menu to disappear once you leave a frame (or the submenus frames). The whole menu is supposed to disappear only when you select an option (which is easy to implement) and when you click elsewhere on the screen. The latter you can't implement, since tkinter only has "<Button-1>" event for when the user clicks inside of the the widget, and i need an event for a click outside the frame/s.

Also, i've seen pseudo-solutions such as creating an invisible frame behind the menu, so that when you click that frame the menu disappears, but then you need the root object to be accessible inside the dropdown menu, which you don't get, you just get the master which in this case should be the TitleBar. You can workaround this, but it's not a clean OOP solution, which is how it should be implemented.

[Akascape]

@LucianoSaldivia
No, tkinter itself can't change title bar parameters except icons and title. But there are some ideas you can try:

Change the title bar color (guide is given here: #1299)
Then you can add a narrow frame below the tile bar where you can place the buttons.

Or, you can recreate a new title bar with customtkinter by disabling the native title bar. Here is a full ready-made template: #736

Other than that python can't change window attributes, you can only do that with C (or ctypes maybe incase of python), an example library is here: https://github.com/littlewhitecloud/CustomTkinterTitlebar (Don't know if it will work properly)

Edit: This menubar will work: #1670

[littlewhitecloud]

LOL, it won't work correctly, the menubar will show below the titlebar but you can put Menubutton in the titlebar.

[LucianoSaldivia]

Hi, first of all, thanks for such a complete answer and also being so responsive!

I've tried the three approaches you mention, and the farthest i've gotten was with the second one, disabling the native title bar and creating my own. But the DropdownMenu is giving me lots of issues, that's the main reason i'm looking for another approach.
Here's my code so far (some parts are in spanish, my mother language):

import customtkinter as ctk
import tkinter as tk
from functools import partial
from typing import Callable



OPTION_BUTTON_PADX = 3
OPTION_BUTTON_PADY = 3




class _CDMOptionButton(ctk.CTkButton):
    def setParentMenu(self, menu: "CustomDropdownMenu"):
        self.parent_menu = menu

class _CDMSubmenuButton(_CDMOptionButton):
    def setSubmenu(self, submenu: "CustomDropdownMenu"):
        self.submenu = submenu

class CustomDropdownMenu(ctk.CTkFrame):
    def __init__(self, 
                 master, 
                 menu_seed_object: ctk.CTkBaseClass | _CDMSubmenuButton,
                 border_width: int = 1, 
                 fg_color = None, 
                 border_color: str | tuple[str, str] = "grey50", 

                 item_fg_color: str | tuple[str, str] = "transparent", 
                 item_hover_color: str | tuple[str, str] = "grey20", 
                 item_font: ctk.CTkFont = ("helvetica", 10),
                 ):
        super().__init__(
            master=master,
            border_width=border_width,
            fg_color=fg_color,
            border_color=border_color,
        )
        
        self.menu_seed_object = menu_seed_object
        self.item_fg_color = item_fg_color
        self.item_hover_color = item_hover_color
        self.item_font = item_font

        self._options_list: list[_CDMOptionButton | _CDMSubmenuButton] = []

        # Se dispara al entrar en cualquier opción?
        self.bind("<Leave>", self._checkIfMouseLeft)
        
        # hidden by default

    def selectOption(self, command) -> None:
        self._hideAllMenus()
        command()
    
    def addOption(self, option: str, command: Callable) -> None:
        optionButton = _CDMOptionButton(
            self, 
            text=option,
            anchor="w",
            command=partial(self.selectOption, command)
        )
        optionButton.setParentMenu(self)
        self._options_list.append(optionButton)
        self._configureButton(optionButton)

        optionButton.pack(
            side="top",
            fill="both", 
            expand=True,
            padx=OPTION_BUTTON_PADX,
            pady=OPTION_BUTTON_PADY,
        )
    def addSubmenuFromSeed(self, submenuSeedName: str) -> "CustomDropdownMenu":
        submenuButtonSeed = _CDMSubmenuButton(self, text=submenuSeedName, anchor="w")
        submenuButtonSeed.setParentMenu(self)
        self._options_list.append(submenuButtonSeed)
        self._configureButton(submenuButtonSeed)

        submenu = CustomDropdownMenu(
            master=self.master,
            menu_seed_object=submenuButtonSeed,
            item_fg_color=self.item_fg_color,
            item_hover_color=self.item_hover_color,
            item_font=self.item_font,
        )
        submenuButtonSeed.setSubmenu(submenu=submenu)
        submenuButtonSeed.configure(command=submenu.toggleShow)

        submenuButtonSeed.bind("<Enter>", submenu._show)

        submenuButtonSeed.pack(
            side="top",
            fill="both", 
            expand=True,
            padx=3,
            pady=3,
        )
        return submenu
    def addSeparator(self) -> None:
        # separator = ttk.Separator(self, orient="horizontal", bg=self._border_color) # No puedo cambiar el color
        separator = ctk.CTkFrame(
            master=self, 
            height=2, # No se puede hacer de 1px, es de mínimo 2px
            fg_color='grey20', 
            # fg_color=self._border_color, 
            border_width=0
        )
        separator.pack(
            side="top",
            fill="x", 
            expand=True,
        )

    def _show(self, *args, **kwargs) -> None:
        if isinstance(self.menu_seed_object, _CDMSubmenuButton):
            # Submenu
            self.place(
                in_=self.menu_seed_object.parent_menu,
                x=self.menu_seed_object.winfo_x() + self.menu_seed_object.winfo_width() + OPTION_BUTTON_PADX - 1,
                y=self.menu_seed_object.winfo_y() - OPTION_BUTTON_PADY,
            )
        else:
            # First Menu
            self.place(
                x=self.menu_seed_object.winfo_x(),
                y=self.menu_seed_object.winfo_y() + self.menu_seed_object.winfo_height(),
            )
        self.focus()    
    def _hide(self, *args, **kwargs) -> None:
        self.place_forget()
    def _hideParentMenus(self, *args, **kwargs) -> None:
        if isinstance(self.menu_seed_object, _CDMSubmenuButton):
            self.menu_seed_object.parent_menu._hideParentMenus()
            self.menu_seed_object.parent_menu._hide()
    def _hideChildrenMenus(self, *args, **kwargs) -> None:
        # Si self contiene submenú , lo cierro
        if any(isinstance(option, _CDMSubmenuButton) for option in self._options_list):
            for option in self._options_list:
                if isinstance(option, _CDMSubmenuButton):
                    option.submenu._hide()
    def _hideAllMenus(self, *args, **kwargs) -> None:
        self._hideChildrenMenus()
        self._hide()
        self._hideParentMenus()
    def _collapseSiblingSubmenus(self, button: _CDMOptionButton | _CDMSubmenuButton, *args, **kwargs) -> None:
        for option in self._options_list:
            if option != button and isinstance(option, _CDMSubmenuButton):
                option.submenu._hideChildrenMenus()
                option.submenu._hide()

    def toggleShow(self, *args, **kwargs) -> None:
        if not self.winfo_manager():
            self._show()
        else:
            self._hideChildrenMenus()
            self._hide()

    def _configureButton(self, boton: ctk.CTkButton) -> None:
        boton.configure(fg_color="transparent")
        if self.item_fg_color:
            boton.configure(fg_color=self.item_fg_color)
        if self.item_hover_color:
            boton.configure(hover_color=self.item_hover_color)
        if self.item_font:
            boton.configure(font=self.item_font)

        boton.bind("<Enter>", partial(self._collapseSiblingSubmenus, boton))
    def _getSubMenus(self) -> list["CustomDropdownMenu"]:
        if any(isinstance(option, _CDMSubmenuButton) for option in self._options_list):
            subMenusList = list()
            for option in self._options_list: 
                if isinstance(option, _CDMSubmenuButton):
                    subMenusList.append(option.submenu)
            return subMenusList
        else:
            return []

    def _contieneCoordenada(self, x_root, y_root) -> bool:
        return self.winfo_rootx() < x_root < self.winfo_rootx()+self.winfo_width() and \
            self.winfo_rooty() < y_root < self.winfo_rooty()+self.winfo_height()
    
    def _checkIfMouseLeft(self, event: tk.Event=None) -> None:
        # print(event.x_root, event.y_root, self._contieneCoordenada(event.x_root, event.y_root))
        # No está en el menu del evento
        if not self._contieneCoordenada(event.x_root, event.y_root):
            
            # Es Submenu y no está en el parent
            if isinstance(self.menu_seed_object, _CDMSubmenuButton) and not self.menu_seed_object.parent_menu._contieneCoordenada(event.x_root, event.y_root):

                # No tiene Submenus, o tiene y no está en ninguno de ellos
                subMenus = self._getSubMenus()
                if subMenus == [] or all((not submenu._contieneCoordenada(event.x_root, event.y_root)) for submenu in subMenus):
                    self._hideAllMenus()
            
            # No es submenú
            elif not isinstance(self.menu_seed_object, _CDMSubmenuButton):

                # No tiene Submenus, o tiene y no está en ninguno de ellos
                subMenus = self._getSubMenus()
                if subMenus == [] or all((not submenu._contieneCoordenada(event.x_root, event.y_root)) for submenu in subMenus):
                    self._hideAllMenus()




def dummy(*kwargs):
    print("dummy func called")


def main():
    root = ctk.CTk()
    root.geometry("800x500+200+200")

    boton = ctk.CTkButton(root, anchor="w")
    dropdownMenu = CustomDropdownMenu(master=root, menu_seed_object=boton)
    boton.configure(
        text="Archivo",
        corner_radius=7,
        fg_color="transparent",
        hover_color="darkblue",
        command=dropdownMenu.toggleShow,
    )
    dropdownMenu.addOption("Abrir...", dummy)
    dropdownMenu.addOption("Nuevo", dummy)
    dropdownMenu.addSeparator()
    exportarSubmenu = dropdownMenu.addSubmenuFromSeed(submenuSeedName="Exportar...")
    exportarSubmenu.addOption("Como PNG...", dummy)
    exportarSubmenu.addOption("Como PDF...", dummy)
    exportarSubmenu.addSeparator()
    otraCosaSubmenu = exportarSubmenu.addSubmenuFromSeed(submenuSeedName="Como otra cosa...")
    otraCosaSubmenu.addOption("Como querés exportarlo campeón?...", dummy)

    # boton.pack()
    boton.place(
        x=0,
        y=0,
    )
    root.mainloop()



if __name__ == "__main__":
    main()

As you can see, the whole menu closes either when you choose an option, or when you "<Leave>" all menus. Problem is, i want the second condition to be when you click somewhere else instead of "<Leave>", andi can't find a proper way of doing this. As i said before, you can workaround the problem calling master to get the "<Button-1>" event, but that would only work when master is root, otherwise clicks wouldn't be detected properly.

[Akascape]

@LucianoSaldivia I just found a hacky way to make this possible in python:

import customtkinter
from ctypes import windll, byref, sizeof, c_int

class CTkTitleMenu(customtkinter.CTkToplevel):
    
    def change_dimension(self):
        self.geometry(f"{root.winfo_width()-125-self.x_offset}x{root.winfo_height()}+{root.winfo_x()+self.x_offset}+{root.winfo_y()+self.y_offset}")
        self.deiconify()
            
    def change_header_color(self, caption_color):
        try:
            # optional feature to change the header color in windows
            HWND = windll.user32.GetParent(self.master.winfo_id())
            DWMWA_CAPTION_COLOR = 35
            windll.dwmapi.DwmSetWindowAttribute(HWND, DWMWA_CAPTION_COLOR, byref(c_int(caption_color)), sizeof(c_int))
        except:
            pass
        
    def __init__(
        self,
        master,
        title_bar_color = "default", 
        x_offset: int = 40,
        y_offset: int = 6):
        
        super().__init__()

        self.after(10)
        self.master = master
        self.master.minsize(200,100)
        self.master.title("")
        self.overrideredirect(True)
        
        if title_bar_color=="default":
            if customtkinter.get_appearance_mode()=="Light":
                title_bar_color = 0x999999 # RGB order: 0xrrggbb
                
            else:
                title_bar_color = 0x303030 # RGB order: 0xrrggbb
                
        self.transparent_color = self._apply_appearance_mode(self._fg_color)
        self.attributes("-transparentcolor", self.transparent_color)
        self.resizable(True, True)
        self.config(background=self.transparent_color)
        self.caption_color = title_bar_color
        self.change_header_color(self.caption_color)
        self.x_offset = x_offset
        self.y_offset = y_offset
        
        self.master.bind("<Configure>", lambda _: self.change_dimension())
        self.master.bind("<FocusIn>", lambda _: self.deiconify())
        self.master.bind("<FocusOut>", lambda _: self.withdraw() if self.master.state()=="iconic" else None)
        self.bind("<FocusIn>", lambda _: root.focus())

# Example Usage:

customtkinter.set_appearance_mode("Dark")

root = customtkinter.CTk()
header = CTkTitleMenu(root)

for i in range(0, 5):
    # add widgets in header frame
    customtkinter.CTkButton(header, text="Tab"+str(i), fg_color="grey15",
                            width=50, height=10).grid(row=0, column=i, padx=(0,10))

root.mainloop()

[Akascape]

@LucianoSaldivia

Why did you choose a CTkTopLevel and not something simpler to setup and configure such as a CTkFrame for example?

Because CTkFrame can't be placed outside the root window. And the title bar part of the main window is actually considered outside. So only a toplevel can be placed in top of the header.

When i resize the window moving the mouse fast enough, you can see a black outline of the CTkTopLevel, very visible right at the left of the window control buttons (minimize, resize and close).

Actually I added toplevel.resizable method which disables the toplevel from displaying as an extra window in taskbar. If we remove this line then it will remove those blocky glitches but now the toplevel will behave as an active window in taskbar.

Also, when maximizing the window, it looks as if it's not starting on (0,0) instead it starts about (-2,-2) you can see this by adding print(self.geometry()) right after line 8 (self.deiconify()).

That's the problem with tkinter, because the header height also becomes a little smaller when maximized. But it can be fixed by adjusting the toplevel y offset.

I tried giving the TopLevel a different geometry, to set it's height to the height of the titlebar but i don't want to hardcode the height value of it...

Sure, it will remove those blocky glitches if you change the height of that toplevel (a fixed value), but in that case you can't place other widgets like your dropdown menu inside that toplevel. You have to spawn it in the root window only (which will look a little displaced).

I have to say, there's a big pro with this approach though, and it's the use of the default window control buttons.

To be honest, there is no other way of implementing a title bar like that with tkinter.

Maybe there are some other methods to fix the toplevel window.

Ig, you have to stay with some minor bugs...

Otherwise i'd be forced to create my own minimize/resize/close buttons...

I tried making a full customised window: #736

But it has lots of minor issues which can't be solved easily (issues like resiziable edges, no icons, no taskbar thumbnail...)

[YoussefEssalhi]

Hi @Akascape , this part of code not work in my win 10 it's only work in my win 11 How can I fix it because I have already worked on a project for a long time and I need to change the color to dark blue [ #031249 ] ?

def change_header_color(self, caption_color):
    try:
        # optional feature to change the header color in windows
        HWND = windll.user32.GetParent(self.master.winfo_id())
        DWMWA_CAPTION_COLOR = 35
        windll.dwmapi.DwmSetWindowAttribute(HWND, DWMWA_CAPTION_COLOR, byref(c_int(caption_color)), sizeof(c_int))
    except:
        pass

my code that i use

try:
    from ctypes import windll, byref, sizeof, c_int
    HWND = windll.user32.GetParent(self.winfo_id())
    windll.dwmapi.DwmSetWindowAttribute(HWND, 35, byref(c_int(0x00491203)), sizeof(c_int))
except:
    pass

[Akascape]

@YoussefEssalhi it will not work in windows 10, that feature is only available for win11. I recommend you to use this package: https://github.com/Akascape/CTkMenuBar

[YoussefEssalhi]

@Akascape , I don't want to use overrideredirect, Is there any way to change the color in Win 10, I just only want to change the color ?
Thanks for your help .

[Akascape]

@YoussefEssalhi I can feel the pain but it is not possible to change the header color so easily in windows 10. You have to redraw everything which is really hard to do.

I even made a ready made package that can change themes and header colors in windows easily: https://github.com/Akascape/py-window-styles, but only the themes are supported in windows 10. You can try the blur themes if you wish, it works in both win 10 and 11.

Other than this, there is a ready made window template made with overrideredirect method: #736

It looks the same as regular window, you can change the header colors easily.

So choose what you want to do. I recommend using pywinstyles to change header color in windows 11 devices and use the simple dark/white headers available in windows 10 by default in customtkinter.

Or you can make 2 versions of it, one for win 11 using pywinstyles and one for win 10 using the ready made template.

[Akascape]

I finally made this project: #1670

[LucianoSaldivia]

I've been away from this project quite a while now, and i plan to keep it that way probably until December at least. From what i can see here, you've done a great job, thanks for making it! Hope it's useful.

[IAmNotVeozy]

i HAVENT tried this, but you can use overridedirect.
customize your titlebar, instead of using the master of root, use the master of your titlebar for the menubar