Menu and MenuButton using Tkinter

Menu Bar Using Tkinter

In this article, we will be talking about creating menu bar and menu button using Python and Tkinter.

I will walk you through this article with an example.

What is a Menubar?

As we all must have used earlier in our laptops, application programs etc, a menu bar is a horizontal bar located at the top of the screen below the title bar, containing drop-down menus.

Creating your First Tkinter Menubar

We just define a menu so we can call it anything we want. Let’s just call this my_menu and this is an object of the Menu() class. And we want this in our root and I should mention that this is just the regular code that we usually start with, it’s going to have a 400 x 400 little icon and a title.

1. Placing the Menu in Tkinter root window

So we want to put this menu in root, from now on we’re going to reference it as my_menu as we would any other sort of widget that we use in Tkinter.

from tkinter import *

root = Tk()
root.title("Menu Bar")

root.geometry("400x400")

my_menu=Menu(root)
root.config(menu=my_menu)

root.mainloop()

2. Adding Menu Items

Now, we will tell Tkinter to use my_menu as the menu and it knows what menus are. And it knows that menus go up at the top and it knows they drop down on a click.

So now, we need to create a menu item.

So let’s call this “file_menu”. It’s going to be the first thing in our menu and we just set this equal to a menu (in this case my_menu). We need to actually put it up on the screen.

We generally grid it or pack it. But here, we’ll be using cascade. 

file_menu= Menu(my_menu)
my_menu.add_cascade(label="File", menu=file_menu)
file_menu.add_command(label="New...",command=our_command)
file_menu.add_separator()
file_menu.add_command(label="Exit",command=root.quit)

We have used my_menu.add_cascade() here, but we could put a “label” parameter here. What we’re doing here is creating little sub-menus and we’re calling this first submenu as the file_menu.

Now, we need to add things to our new little sub-menu so we can say file_menu.add_command().

I have put little separators between the “new” and “exit” buttons by calling file_menu.add_separator() which is just a function.

Similarly, we create edit_menu and option_menu.

edit_menu = Menu(my_menu)
my_menu.add_cascade(label="Edit",menu=edit_menu)
edit_menu.add_command(label="Cut",command=our_command)
edit_menu.add_command(label="Copy",command=our_command)

option_menu = Menu(my_menu)
my_menu.add_cascade(label="Edit",menu=option_menu)
option_menu.add_command(label="Find",command=our_command)
option_menu.add_command(label="Find Next",command=our_command)

3. Adding MenuButton

The menu button widget adds buttons to the drop down.

I have named the menu button as mButton in short. We will use mButton.grid(), that’ll specify that we need a grid and this is where we’re going to put our list item.

Now, we need to do mButton.menu = Menu(mButton) to specify that we actually want a menu style system.

mButton=Menubutton(root,text="Click")
mButton.grid()

# insert any menu here

mButton.menu.add_checkbutton(label="Copy")
mButton.pack()

Complete Code for Implementing a Tkinter Menu and Menubutton

The entire code is as shown below and the output of the same is also shown for your reference.

from tkinter import *

root = Tk()
root.title("Menu Bar")

root.geometry("400x400")

my_menu=Menu(root)
root.config(menu=my_menu)

def our_command():
    my_label = Label(root, text="Clicked!!").pack()


file_menu= Menu(my_menu)
my_menu.add_cascade(label="File", menu=file_menu)
file_menu.add_command(label="New...",command=our_command)
file_menu.add_separator()
file_menu.add_command(label="Exit",command=root.quit)

mButton=Menubutton(root,text="Click")
mButton.grid()

edit_menu = Menu(my_menu)
my_menu.add_cascade(label="Edit",menu=edit_menu)
edit_menu.add_command(label="Cut",command=our_command)
edit_menu.add_command(label="Copy",command=our_command)

mButton.menu.add_checkbutton(label="Copy")
mButton.pack()


option_menu = Menu(my_menu)
my_menu.add_cascade(label="Edit",menu=option_menu)
option_menu.add_command(label="Find",command=our_command)
option_menu.add_command(label="Find Next",command=our_command)

root.mainloop()
Output 1
Output 1
Output 2
Output 2
Output 3
Output 3

Conclusion

So just to quickly recap, you start out by configuring your menu.

  1. We have called it “my_menu” and it’s a menu widget and we stick it in the root. The only weird thing is we have to configure it. So it’s root.config and then we just tell our program what menu to use.
  2. To create items we design a top-level thing like file/edit/selection and add it to our menu and then we just cascade in.
  3. To add items you just do add_command and set the label and put your command and you’re good to go. The only other weird thing is this little separator which is super easy and pretty cool.

Do try out this example and let us know what you think in the comment section below.