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(★) dynamic(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.
  • action (str): the name of the action that provoked the change.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • args: List where the first element contains the id of the selected option.
active dynamic(bool) 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

Page content

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

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

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 function that you define:

You page can define a menu control like:

Page content

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

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

Your Python script must define the my_menu_action function:

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

Disabling menu options

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

Page content

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

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

Adjusting presentation

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

Page content

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

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

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

Page content

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

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