Menu¶
See also
Menus display a list of choices on temporary surfaces.
Usage¶
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.menu import MDDropdownMenu
KV = '''
MDScreen:
MDRaisedButton:
id: button
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.menu.open()
'''
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"text": f"Item {i}",
"viewclass": "OneLineListItem",
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
caller=self.screen.ids.button,
items=menu_items,
width_mult=4,
)
def menu_callback(self, text_item):
print(text_item)
def build(self):
return self.screen
Test().run()
Warning
Do not create the MDDropdownMenu object when you open
the menu window. Because on a mobile device this one will be very slow!
Wrong¶
menu = MDDropdownMenu(caller=self.screen.ids.button, items=menu_items)
menu.open()
Customization of menu item¶
Menu items are created in the same way as items for the RecycleView class.
from kivy.lang import Builder
from kivy.metrics import dp
from kivy.properties import StringProperty
from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.list import IRightBodyTouch, OneLineAvatarIconListItem
from kivymd.uix.menu import MDDropdownMenu
KV = '''
<RightContentCls>
disabled: True
adaptive_size: True
pos_hint: {"center_y": .5}
MDIconButton:
icon: root.icon
user_font_size: "16sp"
md_bg_color_disabled: 0, 0, 0, 0
MDLabel:
text: root.text
font_style: "Caption"
adaptive_size: True
pos_hint: {"center_y": .5}
<Item>
IconLeftWidget:
icon: root.left_icon
RightContentCls:
id: container
icon: root.right_icon
text: root.right_text
MDScreen:
MDRaisedButton:
id: button
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.menu.open()
'''
class RightContentCls(IRightBodyTouch, MDBoxLayout):
icon = StringProperty()
text = StringProperty()
class Item(OneLineAvatarIconListItem):
left_icon = StringProperty()
right_icon = StringProperty()
right_text = StringProperty()
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"text": f"Item {i}",
"right_text": f"R+{i}",
"right_icon": "apple-keyboard-command",
"left_icon": "git",
"viewclass": "Item",
"height": dp(54),
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
caller=self.screen.ids.button,
items=menu_items,
width_mult=4,
)
def menu_callback(self, text_item):
print(text_item)
def build(self):
return self.screen
Test().run()
Header Menu¶
from kivy.lang import Builder
from kivy.metrics import dp
from kivymd.app import MDApp
from kivymd.uix.menu import MDDropdownMenu
from kivymd.uix.boxlayout import MDBoxLayout
KV = '''
<MenuHeader>
orientation: "vertical"
adaptive_size: True
padding: "4dp"
MDBoxLayout:
spacing: "12dp"
adaptive_size: True
MDIconButton:
icon: "gesture-tap-button"
pos_hint: {"center_y": .5}
MDLabel:
text: "Actions"
adaptive_size: True
pos_hint: {"center_y": .5}
MDScreen:
MDRaisedButton:
id: button
text: "PRESS ME"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.menu.open()
'''
class MenuHeader(MDBoxLayout):
'''An instance of the class that will be added to the menu header.'''
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"text": f"Item {i}",
"viewclass": "OneLineListItem",
"height": dp(56),
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
header_cls=MenuHeader(),
caller=self.screen.ids.button,
items=menu_items,
width_mult=4,
)
def menu_callback(self, text_item):
print(text_item)
def build(self):
return self.screen
Test().run()
Menu with MDToolbar¶
The MDDropdownMenu works well with the standard
MDToolbar. Since the buttons on the Toolbar are created
by the MDToolbar component, it is necessary to pass the button as an argument to
the callback using lambda x: app.callback(x).
Note
This example uses drop down menus for both the righthand and
lefthand menus (i.e both the ‘triple bar’ and ‘triple dot’ menus) to
illustrate that it is possible. A better solution for the ‘triple bar’ menu
would probably have been MDNavigationDrawer.
from kivy.lang import Builder
from kivy.metrics import dp
from kivymd.app import MDApp
from kivymd.uix.menu import MDDropdownMenu
from kivymd.uix.snackbar import Snackbar
KV = '''
MDBoxLayout:
orientation: "vertical"
MDToolbar:
title: "MDToolbar"
left_action_items: [["menu", lambda x: app.callback(x)]]
right_action_items: [["dots-vertical", lambda x: app.callback(x)]]
MDLabel:
text: "Content"
halign: "center"
'''
class Test(MDApp):
def build(self):
menu_items = [
{
"viewclass": "OneLineListItem",
"text": f"Item {i}",
"height": dp(56),
"on_release": lambda x=f"Item {i}": self.menu_callback(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
items=menu_items,
width_mult=4,
)
return Builder.load_string(KV)
def callback(self, button):
self.menu.caller = button
self.menu.open()
def menu_callback(self, text_item):
self.menu.dismiss()
Snackbar(text=text_item).open()
Test().run()
Position menu¶
Bottom position¶
See also
from kivy.lang import Builder
from kivy.metrics import dp
from kivy.properties import StringProperty
from kivymd.uix.list import OneLineIconListItem
from kivymd.app import MDApp
from kivymd.uix.menu import MDDropdownMenu
KV = '''
<IconListItem>
IconLeftWidget:
icon: root.icon
MDScreen
MDTextField:
id: field
pos_hint: {'center_x': .5, 'center_y': .6}
size_hint_x: None
width: "200dp"
hint_text: "Password"
on_focus: if self.focus: app.menu.open()
'''
class IconListItem(OneLineIconListItem):
icon = StringProperty()
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"viewclass": "IconListItem",
"icon": "git",
"height": dp(56),
"text": f"Item {i}",
"on_release": lambda x=f"Item {i}": self.set_item(x),
} for i in range(5)]
self.menu = MDDropdownMenu(
caller=self.screen.ids.field,
items=menu_items,
position="bottom",
width_mult=4,
)
def set_item(self, text__item):
self.screen.ids.field.text = text__item
self.menu.dismiss()
def build(self):
return self.screen
Test().run()
Center position¶
from kivy.lang import Builder
from kivy.metrics import dp
from kivy.properties import StringProperty
from kivymd.uix.list import OneLineIconListItem
from kivymd.app import MDApp
from kivymd.uix.menu import MDDropdownMenu
KV = '''
<IconListItem>
IconLeftWidget:
icon: root.icon
MDScreen
MDDropDownItem:
id: drop_item
pos_hint: {'center_x': .5, 'center_y': .5}
text: 'Item 0'
on_release: app.menu.open()
'''
class IconListItem(OneLineIconListItem):
icon = StringProperty()
class Test(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(KV)
menu_items = [
{
"viewclass": "IconListItem",
"icon": "git",
"text": f"Item {i}",
"height": dp(56),
"on_release": lambda x=f"Item {i}": self.set_item(x),
} for i in range(5)
]
self.menu = MDDropdownMenu(
caller=self.screen.ids.drop_item,
items=menu_items,
position="center",
width_mult=4,
)
self.menu.bind()
def set_item(self, text_item):
self.screen.ids.drop_item.set_item(text_item)
self.menu.dismiss()
def build(self):
return self.screen
Test().run()
