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(★)	str|list[str|Icon|any] dynamic		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 dynamic	True	Indicates if this component is active. An inactive component allows no user interaction.

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

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.

Usage

Defining a simple static menu

Definition

MarkdownHTMLPython

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

MarkdownHTMLPython

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

MarkdownHTMLPython

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

MarkdownHTMLPython

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

Menu icons

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

Definition

MarkdownHTMLPython

<|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')]}")