OptionMenu Widget In Tkinter

OptionMenu Widget In Tkinter

With the help of the Tkinter OptionMenu widget, we can make a dropdown menu for an application. A drop-down menu is a menu that contains a list of options. And a user can choose one option by clicking on the drop-down menu. Below you can see a dropdown menu.

To make a proper OptionMenu or dropdown menu, we have to give some arguments to the OptionMenu widget like this:

optionmenu=OptionMenu(root,var,"apple","banana","orange","grapes","melon","pineapple",command=func)

var is the global string variable that is associated with the OptionMenu widget and other strings (“apple”, “banana”,…….) are the options of the OptionMenu.

You can set the initial value of the OptionMenu by using the set() method of the variable.

func is the function that will be invoked when the user chooses an option from the OptionMenu.

If you want to configure an OptionMenu widget, you have to use configure() method.

Some Mostly Used Configuration Options Of The OptionMenu Widget.

To know more about other configuration options, see Tkinter Standard Options.

Example:

from tkinter import *

root=Tk()
root.grid_anchor('center')

# func1 is the function which will be invoked when a user choose an option from the optionmenu1
def func1(val):
    # get() is used to get the value of var1 variable
    optmenu1val=var1.get()
    
    # label will the show the value of the var1 when the user choose an option from the optionmenu1
    label=Label(root,text=optmenu1val,background="yellow",foreground="red",font="arial 24 bold",padx=30,pady=5)
    label.grid(row=0,column=1)

# var1 is a StringVar() which is associating with the optionmenu1
var1=StringVar()

# optionmenu1 is the simple option menu which is using the command option
optionmenu1=OptionMenu(root,var1,"apple","banana","orange","grapes","melon","pineapple",command=func1)
optionmenu1.grid(row=0,column=0)


def func2(val):
    optmenu2val=var2.get()
    label=Label(root,text=optmenu2val,background="lightgreen",foreground="red",font="arial 24 bold",padx=30,pady=5)
    label.grid(row=1,column=1)

var2=StringVar()

# optionmenu2 works same as the optionmenu1 but we design the optionmenu1 with its configuration options
optionmenu2=OptionMenu(root,var2,"apple","banana","orange","grapes","melon","pineapple",command=func2)
# configure() is used to specify the options and values of the optionMenu  
optionmenu2.configure(background='green',foreground='white',font="Georgia 14 bold",width=10,height=2,direction='right',underline=2,justify='right',padx=10,pady=10,relief='sunken',borderwidth=10)
optionmenu2.grid(row=1,column=0)


# other optionMenu's and their associated functions and variables
def func3(val):
    optmenu3val=var3.get()
    label=Label(root,text=optmenu3val,background="green",foreground="orange",font="arial 24 bold",padx=30,pady=20)
    label.grid(row=2,column=1)

var3=StringVar()
var3.set("apple")

optionmenu3=OptionMenu(root,var3,"apple","banana","orange","grapes","melon","pineapple",command=func3)
optionmenu3.configure(background='orange',foreground='black',font="Georgia 12 bold",direction='above',underline=4,padx=10,pady=10,relief='raised',borderwidth=8,indicatoron=0,width=10,activebackground='red',activeforeground='white')
optionmenu3.grid(row=2,column=0)

# optionMenus with images
def func4(val):
    optmenu4val=var4.get()
    label=Label(root,text=optmenu4val,background="skyblue",foreground="purple",font="arial 24 bold",padx=30,pady=20)
    label.grid(row=3,column=1)

var4=StringVar()
var4.set("apple")

img=PhotoImage(file="options.png")
optionmenu4=OptionMenu(root,var4,"apple","banana","orange","grapes","melon","pineapple",command=func4)
optionmenu4.configure(background='blue',padx=10,pady=10,relief='groove',borderwidth=10,indicatoron=0,width=200,activebackground='red',activeforeground='white',image=img)
optionmenu4.grid(row=3,column=0)

def func5(val):
    optmenu5val=var5.get()
    label=Label(root,text=optmenu5val,background="pink",foreground="silver",font="arial 24 bold",padx=30,pady=20)
    label.grid(row=4,column=1)

var5=StringVar()

img1=PhotoImage(file="options.png")
optionmenu5=OptionMenu(root,var5,"apple","banana","orange","grapes","melon","pineapple",command=func5)
optionmenu5.configure(background='pink',foreground='black',font="Georgia 12 bold",direction='flush',padx=20,pady=20,relief='ridge',borderwidth=15,indicatoron=0,width=200,activebackground='orange',activeforeground='blue',image=img1,compound='top')
optionmenu5.grid(row=4,column=0)

root.mainloop()

Output:

ttk OptionMenu Widget In Tkinter

With the help of the ttk OptionMenu widget, you can make more modern-looking dropdown menus. The process to make a ttk OptionMenu is the same as for the OptionMenu widget. But in ttk OptionMenu you pass one more argument as you see below:

optionmenu=ttk.OptionMenu(root,var,"apple","apple","banana","orange","grapes","melon","pineapple",command=func)

var is the global string variable that is associated with the ttk OptionMenu widget and the first “apple” is the default value of the ttk OptionMenu and others strings (“apple”, ”banana”,…….) are all the options of the ttk OptionMenu.

With ttk OptionMenu, you don’t have to set the initial value of the dropdown menu by setting the value of the associated variable.

Like ttk Menubutton, ttk OptionMenu also uses “TMenubutton” as its default style class and you can also make a new style class for your ttk OptionMenu widget using this style class.

See this if you want to know how you can style the ttk OptionMenu.

Example:

from tkinter import *
from tkinter import ttk

root=Tk()
root.grid_anchor('center')
img=PhotoImage(file="options.png")
style=ttk.Style()

# function, variable and radiobuttons to change the style theme
def changetheme():
    themeval=themevar.get()
    style.theme_use(themeval)
    
    # TMenubutton is the default style class for ttk.optionMenus 
    style.configure("design1.TMenubutton",arrowsize=20,background="orange",foreground="green",relief="raised",font="Arial 14 bold")
    style.configure("design2.TMenubutton",background="skyblue",foreground="yellow",relief="ridge",font="Arial 14 bold",anchor="center",width=20,arrowsize=15)
    style.configure("design3.TMenubutton",background="brown",foreground="lightyellow",relief="groove",font="Arial 14 bold",anchor="w",width=20,image=img)

themevar=StringVar()
themevar.set("vista")

btn1=ttk.Radiobutton(root,text='winnative theme',value="winnative",command=changetheme,variable=themevar,style='Toolbutton')
btn2=ttk.Radiobutton(root,text='clam theme',value="clam",command=changetheme,variable=themevar,style='Toolbutton')
btn3=ttk.Radiobutton(root,text='alt theme',value="alt",command=changetheme,variable=themevar,style='Toolbutton')
btn4=ttk.Radiobutton(root,text='classic theme',value="classic",command=changetheme,variable=themevar,style='Toolbutton')
btn5=ttk.Radiobutton(root,text='vista theme',value="vista",command=changetheme,variable=themevar,style='Toolbutton')
btn6=ttk.Radiobutton(root,text='xpnative theme',value="xpnative",command=changetheme,variable=themevar,style='Toolbutton')

btn1.grid(row=0,column=2)
btn2.grid(row=1,column=2)
btn3.grid(row=2,column=2)
btn4.grid(row=3,column=2)
btn5.grid(row=0,column=3)
btn6.grid(row=1,column=3)

changetheme()

# this is the function which will be invoked when someone change the value of the optionmenu1
def func1(val):
    # label will show the value of the optionmenu1
    label=ttk.Label(root,text=f"{val}",background="yellow",foreground="red",font="arial 16 bold",padding=10)
    label.grid(row=0,column=1)

# this is the variable which will be associated with the optionmenu1
var1=StringVar()
optionmenu1=ttk.OptionMenu(root,var1,"apple","apple","banana","orange","grapes","melon","pineapple",command=func1)
optionmenu1.grid(row=0,column=0)

def func2(val):
    optmenu2val=var2.get()
    label=ttk.Label(root,text=optmenu2val,background="lightgreen",foreground="red",font="arial 18 bold",padding=20)
    label.grid(row=1,column=1)

var2=StringVar()
# optionmenu2 works same as the optionmenu1 but we using the style option with the optionmenu2
optionmenu2=ttk.OptionMenu(root,var2,"apple","apple","banana","orange","grapes","melon","pineapple",command=func2,style="design1.TMenubutton")
# configure() is used to specify the options and values of the optionMenu  
optionmenu2.configure(direction='right',underline=2,width=30,padding=10)
optionmenu2.grid(row=1,column=0)

# optionmenu3 and optionmenu4  will be designed with the same style class "design2.TMenubutton"
def func3(val):
    label=ttk.Label(root,text=str(val),background="green",foreground="orange",font="arial 18 bold",padding=20)
    label.grid(row=2,column=1)

var3=StringVar()

optionmenu3=ttk.OptionMenu(root,var3,"melon","apple","banana","orange","grapes","melon","pineapple",command=func3, style="design2.TMenubutton")
optionmenu3.configure(direction='right',padding=10)
optionmenu3.grid(row=2,column=0)

# optionmenu4 is using the "menu" option with which you can attach a menu with the ttk.OptionMenu
var4=StringVar()
optionmenu4=ttk.OptionMenu(root,var4,"Menu",style="design2.TMenubutton")
menu=Menu(optionmenu4,tearoff=0)
menu.add_command(label="Command")
menu.add_checkbutton(label="Checkbutton")
menu.add_separator()
menu.add_radiobutton(label="Radiobutton 1")
menu.add_radiobutton(label="Radiobutton 2")
optionmenu4.configure(direction='below',padding=10,menu=menu)
optionmenu4.grid(row=3,column=0)

def func5(val):
    label=Label(root,text=str(val),background="pink",foreground="silver",font="arial 24 bold",padx=30,pady=20)
    label.grid(row=4,column=1)

var5=StringVar()

# optionmenu5 shows image and text both with the help of the "compound" option
optionmenu5=ttk.OptionMenu(root,var5,"orange","apple","banana","orange","grapes","melon","pineapple",command=func5,style="design3.TMenubutton")
optionmenu5.configure(direction='below',padding=10,compound="top")
optionmenu5.grid(row=4,column=0)

root.mainloop()

Output :