Skip to main content

MenuStyle

MenuStyle allows controlling the menu's visual aspects, such as shape, background and shadow colors, content padding, border width and radius.

Each individual style attribute could be configured for all or particular Material states of a menu, such as HOVERED, FOCUSED, DISABLED and others. For example, you can configure a different shape, background color for a HOVERED state and configure fallback values for all other states.

To configure style attribute for all Material states, set its value to a literal (or class instance). For example, if you set bgcolor property to a literal the value will be applied to all menu states:

ft.MenuStyle(
    bgcolor=ft.colors.RED
)

To configure style attribute for specific Material states set its value to a dictionary where the key is state name. For example, to configure different background colors for HOVERED and FOCUSED states and another colors for all other states:

ft.MenuStyle(
    bgcolor={
        ft.MaterialState.HOVERED: ft.colors.WHITE,
        ft.MaterialState.FOCUSED: ft.colors.BLUE,
        ft.MaterialState.DEFAULT: ft.colors.BLACK,
    }
)

MenuStyle class has the following properties:

  • alignment - Defines the desired alignment of the submenu when opened relative to the button that opens it.
  • bgcolor - The menu's background fill color.
  • elevation - The elevation of the menu's Material.
  • padding - The padding between the menu's boundary and its child.
  • shadow_color - The shadow color of the menu's Material.
  • shape - The shape of the menu's underlying Material, an instance of OutlinedBorder class.
  • side - An instance of BorderSide class, the color and weight of the menu's outline.
  • surface_tint_color - The surface tint color of the menu's Material.