Skip to content

PopupMenuButton

An icon button which displays a menu when clicked.

ft.PopupMenuButton(
    items=[
        ft.PopupMenuItem(content="Sm"),
        ft.PopupMenuItem(content="Med"),
        ft.PopupMenuItem(content="Lg"),
    ],
    menu_position=ft.PopupMenuPosition.UNDER,
)

PopupMenuButton

Opened popup menu under button

Inherits: LayoutControl

Properties

Events

Examples#

Live example

Basic Example#

import flet as ft


def main(page: ft.Page):
    def handle_check_item_click(e: ft.Event[ft.PopupMenuItem]):
        e.control.checked = not e.control.checked
        page.update()

    page.add(
        ft.PopupMenuButton(
            key="popup",
            items=[
                ft.PopupMenuItem(content="Item 1"),
                ft.PopupMenuItem(icon=ft.Icons.POWER_INPUT, content="Check power"),
                ft.PopupMenuItem(
                    content=ft.Row(
                        controls=[
                            ft.Icon(ft.Icons.HOURGLASS_TOP_OUTLINED),
                            ft.Text("Item with a custom content"),
                        ]
                    ),
                    on_click=lambda _: print("Button with custom content clicked!"),
                ),
                ft.PopupMenuItem(),  # divider
                ft.PopupMenuItem(
                    content="Checked item",
                    checked=False,
                    on_click=handle_check_item_click,
                ),
            ],
        )
    )


if __name__ == "__main__":
    ft.run(main)

basic

Properties#

bgcolor class-attribute instance-attribute #

bgcolor: Optional[ColorValue] = None

The menu's background color.

clip_behavior class-attribute instance-attribute #

clip_behavior: ClipBehavior = NONE

The content will be clipped (or not) according to this option.

content class-attribute instance-attribute #

content: Optional[StrOrControl] = None

A Control that will be displayed instead of "more" icon.

elevation class-attribute instance-attribute #

elevation: Optional[Number] = None

The menu's elevation when opened.

Defaults to 8.

enable_feedback class-attribute instance-attribute #

enable_feedback: Optional[bool] = None

Whether detected gestures should provide acoustic and/or haptic feedback.

On Android, for example, setting this to True produce a click sound and a long-press will produce a short vibration.

Defaults to True.

icon class-attribute instance-attribute #

icon: Optional[IconDataOrControl] = None

If provided, an icon to draw on the button.

icon_color class-attribute instance-attribute #

icon_color: Optional[ColorValue] = None

The icon's color.

icon_size class-attribute instance-attribute #

icon_size: Optional[Number] = None

The icon's size.

items class-attribute instance-attribute #

items: list[PopupMenuItem] = field(default_factory=list)

A collection of PopupMenuItem controls to display in a dropdown menu.

menu_padding class-attribute instance-attribute #

menu_padding: Optional[PaddingValue] = None

TBD

menu_position class-attribute instance-attribute #

menu_position: Optional[PopupMenuPosition] = None

Defines position of the popup menu relative to the button.

Defaults to PopupMenuPosition.OVER.

padding class-attribute instance-attribute #

padding: PaddingValue = 8

TBD

popup_animation_style class-attribute instance-attribute #

popup_animation_style: Optional[AnimationStyle] = None

TBD

shadow_color class-attribute instance-attribute #

shadow_color: Optional[ColorValue] = None

The color used to paint the shadow below the menu.

shape class-attribute instance-attribute #

shape: Optional[OutlinedBorder] = None

The menu's shape.

Defaults to CircleBorder(radius=10.0).

size_constraints class-attribute instance-attribute #

size_constraints: Optional[BoxConstraints] = None

TBD

splash_radius class-attribute instance-attribute #

splash_radius: Optional[Number] = None

The splash radius.

style class-attribute instance-attribute #

style: Optional[ButtonStyle] = None

TBD

Events#

on_cancel class-attribute instance-attribute #

on_cancel: Optional[
    ControlEventHandler[PopupMenuButton]
] = None

Called when the user dismisses/cancels the popup menu without selecting an item.

on_open class-attribute instance-attribute #

on_open: Optional[ControlEventHandler[PopupMenuButton]] = (
    None
)

Called when the popup menu is shown.

on_select class-attribute instance-attribute #

on_select: Optional[
    ControlEventHandler[PopupMenuButton]
] = None

TBD

Inherits: Control

A popup menu item.

Properties

Events

Properties#

checked class-attribute instance-attribute #

checked: Optional[bool] = None

Whether this menu item is checked.

If set to True, a checkmark will be shown on the left of the content.

content class-attribute instance-attribute #

content: Optional[StrOrControl] = None

A Control representing custom content of this menu item.

height class-attribute instance-attribute #

height: Number = 48.0

The minimum height of this menu item.

icon class-attribute instance-attribute #

icon: Optional[IconDataOrControl] = None

An icon to draw before the text label of this menu item.

label_text_style class-attribute instance-attribute #

label_text_style: Optional[TextStyle] = None

The text style of the label of this menu item.

mouse_cursor class-attribute instance-attribute #

mouse_cursor: Optional[MouseCursor] = None

The cursor to be displayed when a mouse pointer enters or is hovering over this item.

padding class-attribute instance-attribute #

padding: Optional[PaddingValue] = None

The padding of this menu item.

Defaults to Padding.symmetric(horizontal=12).

Note

The height value of this menu item may influence the applied padding.

For example, if a height greater than the height of the sum of the padding and a content is provided, then the padding's effect will not be visible.

Events#

on_click class-attribute instance-attribute #

on_click: Optional[ControlEventHandler[PopupMenuItem]] = (
    None
)

Called when a user clicks on this menu item.