Skip to content


Shows a left-side menu.

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


Name Type Default Description
lov(★) str|list[str|Icon|any]

The list of menu option values.

adapter Function `"lambda x: str(x)"`

The function that transforms an element of lov into a tuple(id:str, label:str|Icon).

type str Type of the first lov element

Must be specified if lov contains a non specific type of data (ex: dict).
value must be of that type, lov must be an iterable on this type, and the adapter function will receive an object of this type.

label str

The title of the menu.

width str "15vw"

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

width[mobile] str "85vw"

The width, in CSS units, of the menu when unfolded, on a mobile device.

on_action Callback

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

All the parameters of that function are optional:

  • state (State): the state instance.
  • id (str): the identifier of the button.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • action: the name of the action that triggered this callback.
    • args: List where the first element contains the id of the selected option.

active bool

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

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


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.


Defining a simple static menu


<|menu|lov=menu 1;menu 2|>
<taipy:menu lov="menu 1;menu 2"/>
import taipy.gui.builder as tgb
..."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:


<|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
..."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.


<|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
..."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.


<|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
..."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.


<|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
..."{[('id1', Icon('/images/icon.png', 'Menu option 1')), ('id2', 'Menu option 2')]}")