Skip to content

menu

Shows a left-side menu.

This control is represented by a unique left-anchor and foldable vertical menu.

Properties

Name Type Default Description
lov(★) Union[str,list[Union[str,Icon,Any]]]
dynamic

The list of menu option values.
adapter Union[str, Callable] lambda x: str(x)

A function or the name of the function that transforms an element of lov into a tuple(id:str, label:Union[str,Icon]).
The default value is a function that returns the string representation of the lov element.
type str Type name of the first lov element

This property is required if lov contains a non-specific type of data (e.g., a dictionary).
Then:

  • value must be of that type
  • lov must be an iterable containing elements of this type
  • The function set to adapter will receive an object of this type.

The default value is the type of the first element in lov.
label str

The title of the menu.
inactive_ids Union[str,list[str]]
dynamic

Semicolon (';')-separated list or a list of menu items identifiers that are disabled.
width str "15vw"

The width of the menu when unfolded, in CSS units.
Note that when running on a mobile device, the property width[active] is used instead.
width[mobile] str "85vw"

The width of the menu when unfolded, in CSS units, when running on a mobile device.
on_action Union[str, Callable]

A function or the name of a function that is triggered when a menu option is selected.

This function is invoked with the following parameters:

  • state (State): the state instance.
  • id (str): the identifier of the button, if it has one.
  • payload (dict): a dictionary containing details about the callback invocation, with the following keys:
    • action: the name of the action that triggered this callback.
    • args: a list where the first element contains the identifier of the selected option.
active bool
dynamic		 True

Indicates if this component is active.
An inactive component allows no user interaction.

(★)lov is the default property for this visual element.

Usage

Defining a simple static menu

Definition

<|menu|lov=menu 1;menu 2|>

<taipy:menu lov="menu 1;menu 2"/>

import taipy.gui.builder as tgb
...
tgb.menu(lov="menu 1;menu 2")

Calling a user-defined function

To have the selection of a menu item call a user-defined function, you must set the on_action property to a user-defined function:

You page can define a menu control like:

Definition

<|menu|lov=menu 1;menu 2|on_action=my_menu_action|>

<taipy:menu lov="menu 1;menu 2" on_action="my_menu_action"/>

import taipy.gui.builder as tgb
...
tgb.menu(lov="menu 1;menu 2", on_action=my_menu_action)

Your Python script must define the my_menu_action() function:

def my_menu_action(state, ...):
  ...

Disabling menu options

The inactive_ids property can be set to dynamically disable any specific menu options.

Definition

<|menu|lov=menu 1;menu 2;menu 3|inactive_ids=menu 2;menu 3|>

<taipy:menu lov="menu 1;menu 2;menu 3" inactive_ids="menu 2;menu 3"/>

import taipy.gui.builder as tgb
...
tgb.menu(lov="menu 1;menu 2;menu 3", inactive_ids="menu 2;menu 3")

Adjusting presentation

The label property defines the text associated with the main Icon.
The properties width and width[mobile] specify the requested width of the menu when expanded.

Definition

<|menu|lov=menu 1;menu 2;menu 3|label=Menu title|width=15vw|width[mobile]=80vw|>

<taipy:menu lov="menu 1;menu 2;menu 3" label="Menu title" width="15vw" width[mobile]="80vw"/>

import taipy.gui.builder as tgb
...
tgb.menu(lov="menu 1;menu 2;menu 3", label="Menu title", width="15vw", width__mobile="80vw")

As for every control that deals with lov, each menu option can display an image (see Icon^) and/or some text.

Definition

<|menu|lov={[("id1", Icon("/images/icon.png", "Menu option 1")), ("id2", "Menu option 2")]}|>

<taipy:menu lov="{[('id1', Icon('/images/icon.png', 'Menu option 1')), ('id2', 'Menu option 2')]}"/>

import taipy.gui.builder as tgb
...
tgb.menu(lov="{[('id1', Icon('/images/icon.png', 'Menu option 1')), ('id2', 'Menu option 2')]}")

Styling

All the menu controls are generated with the "taipy-menu" CSS class. You can use this class name to select the menu controls on your page and apply style.