Skip to main content

ContextMenu

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

Tip

On web, call BrowserContextMenu.disable() method to suppress the default browser context menu before relying on custom menus.

ContextMenu
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​

play_arrowTry Online
import flet as ft


async def main(page: ft.Page):
    # on web, disable default browser context menu
    if page.web:
        await ft.BrowserContextMenu().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(
                    key="context_menu_trigger_area",
                    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​

play_arrowTry Online
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)

Custom trigger​

play_arrowTry Online
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(
                key="context_menu_custom_trigger_area",
                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: 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: ContextMenuTrigger | None = 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: ContextMenuTrigger | None = (
    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: ContextMenuTrigger | None = (
    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: EventHandler[ContextMenuDismissEvent] | None = (
    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: EventHandler[ContextMenuSelectEvent] | None = (
    None
)

Fires when a context menu item is selected.

Methods​

openasync​

open(
    global_position: OffsetValue | None = None,
    local_position: OffsetValue | None = None,
) -> None

Opens the context menu programmatically, and displays items.

Parameters:

  • global_position (OffsetValue | None, 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 (OffsetValue | None, default: None) - A local coordinate relative to the content. When provided without global_position, the coordinate is translated to global space automatically.