Skip to main content

ContextMenu

Wraps its content and displays contextual menus for specific mouse events.

Tip

On web, call disable method of flet.Page.browser_context_menu to suppress the default browser context menu before relying on custom menus.

ContextMenu
Basic ContextMenu

Inherits: LayoutControl

Properties

Events

  • on_dismiss - Fires when the menu is dismissed without a selection, or when an attempt is made to open the menu but no items are available.
  • on_select - Fires when a context menu item is selected.

Methods

  • open - Opens the context menu programmatically, and displays items.

Examples​

Triggers​

import flet as ft


async def main(page: ft.Page):
    # on web, disable default browser context menu
    if page.web:
        await page.browser_context_menu.disable()

    def handle_item_click(e: ft.Event[ft.PopupMenuItem]):
        action = e.control.content
        page.show_dialog(ft.SnackBar(content=f"Item '{action}' selected."))

    page.add(
        ft.SafeArea(
            expand=True,
            content=ft.ContextMenu(
                primary_items=[
                    ft.PopupMenuItem(content="Primary 1", on_click=handle_item_click),
                    ft.PopupMenuItem(content="Primary 2", on_click=handle_item_click),
                ],
                primary_trigger=ft.ContextMenuTrigger.DOWN,
                secondary_items=[
                    ft.PopupMenuItem(content="Secondary 1", on_click=handle_item_click),
                    ft.PopupMenuItem(content="Secondary 2", on_click=handle_item_click),
                ],
                secondary_trigger=ft.ContextMenuTrigger.DOWN,
                tertiary_items=[
                    ft.PopupMenuItem(content="Tertiary 1", on_click=handle_item_click),
                    ft.PopupMenuItem(content="Tertiary 2", on_click=handle_item_click),
                ],
                tertiary_trigger=ft.ContextMenuTrigger.DOWN,
                on_select=lambda e: print(f"Selected item: {e.item.content}"),
                on_dismiss=lambda e: print("Menu dismissed"),
                expand=True,
                content=ft.Container(
                    expand=True,
                    bgcolor=ft.Colors.BLUE,
                    alignment=ft.Alignment.CENTER,
                    border_radius=ft.BorderRadius.all(12),
                    content=ft.Text("Left/middle/right click to open a context menu."),
                ),
            ),
        ),
    )


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

Programmatic open​

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    def handle_select(e: ft.ContextMenuSelectEvent):
        action = e.item.content
        page.show_dialog(ft.SnackBar(f"Item '{action}' selected."))

    async def open_menu(e: ft.Event[ft.Button]):
        await menu.open()

    menu = ft.ContextMenu(
        on_select=handle_select,
        items=[
            ft.PopupMenuItem(
                content="Item 1",
                on_click=lambda e: print(f"{e.control.content}"),
            ),
            ft.PopupMenuItem(
                content="Item 2",
                on_click=lambda e: print(f"{e.control.content}"),
            ),
            ft.PopupMenuItem(
                content="Item 3",
                on_click=lambda e: print(f"{e.control.content}"),
            ),
        ],
        content=ft.Button("Click to open menu", on_click=open_menu),
    )

    page.add(
        ft.SafeArea(
            content=menu,
        ),
    )


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

Programmatic open with custom trigger​

import flet as ft


def main(page: ft.Page):
    async def open_menu(e: ft.TapEvent[ft.GestureDetector]):
        await menu.open(
            local_position=e.local_position,
            global_position=e.global_position,
        )

    menu = ft.ContextMenu(
        expand=True,
        items=[
            ft.PopupMenuItem(
                content="Cut",
                on_click=lambda e: print(f"{e.control.content}"),
            ),
            ft.PopupMenuItem(
                content="Copy",
                on_click=lambda e: print(f"{e.control.content}"),
            ),
            ft.PopupMenuItem(
                content="Paste",
                on_click=lambda e: print(f"{e.control.content}"),
            ),
        ],
        content=ft.GestureDetector(
            expand=True,
            on_double_tap_down=open_menu,
            content=ft.Container(
                bgcolor=ft.Colors.BLUE,
                alignment=ft.Alignment.CENTER,
                content=ft.Text("Double-click to open the context menu."),
            ),
        ),
    )

    page.add(
        ft.SafeArea(
            expand=True,
            content=menu,
        ),
    )


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

Properties​

contentinstance-attribute​

content: Annotated[Control, V.visible_control()]

The child control that listens for mouse interaction.

Raises:

  • ValueError - If not visible.

itemsclass-attributeinstance-attribute​

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

A list of menu items to display in the context menu, when open is called.

primary_itemsclass-attributeinstance-attribute​

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

A list of menu items to display in the context menu, for primary (usually left) mouse button actions.

These items are displayed when the corresponding primary_trigger is activated.

primary_triggerclass-attributeinstance-attribute​

primary_trigger: Optional[ContextMenuTrigger] = None

Defines a trigger mode for the display of primary_items.

If set to None, the trigger is disabled.

secondary_itemsclass-attributeinstance-attribute​

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

A list of menu items to display in the context menu for secondary (usually right) mouse button actions.

These items are displayed when the corresponding secondary_trigger is activated.

secondary_triggerclass-attributeinstance-attribute​

secondary_trigger: Optional[ContextMenuTrigger] = ContextMenuTrigger.DOWN

Defines a trigger mode for the display of secondary_items.

If set to None, the trigger is disabled.

tertiary_itemsclass-attributeinstance-attribute​

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

A list of menu items to display in the context menu for tertiary (usually middle) mouse button actions.

These items are displayed when the corresponding tertiary_trigger is activated.

tertiary_triggerclass-attributeinstance-attribute​

tertiary_trigger: Optional[ContextMenuTrigger] = ContextMenuTrigger.DOWN

Defines a trigger mode for the display of tertiary_items.

If set to None, the trigger is disabled.

Events​

on_dismissclass-attributeinstance-attribute​

on_dismiss: Optional[EventHandler[ContextMenuDismissEvent]] = None

Fires when the menu is dismissed without a selection, or when an attempt is made to open the menu but no items are available.

on_selectclass-attributeinstance-attribute​

on_select: Optional[EventHandler[ContextMenuSelectEvent]] = None

Fires when a context menu item is selected.

Methods​

openasync​

open(global_position: Optional[OffsetValue] = None, local_position: Optional[OffsetValue] = None)

Opens the context menu programmatically, and displays items.

Parameters:

  • global_position (Optional[OffsetValue], default: None) - A global coordinate describing where the menu should appear. If omitted, local_position or the center of the content is used.
  • local_position (Optional[OffsetValue], default: None) - A local coordinate relative to the content. When provided without global_position, the coordinate is translated to global space automatically.