Click event in submenu item with streamlit_option_menu

Hi everyone. Listen click event in submenu item when is selected for example if “Manage” is selected print “clicked Manage”. This is for menu item: if menu_selection == 'Home': What will be for submenu item?

menu = {
    'title': 'Menu principal',
    'items': { 
        'Home' : {
            'action': None, 'item_icon': 'house', 'submenu': {
                'title': None,
                'items': { 
                    'Task' : {'action': do_view_tasks, 'item_icon': 'list-task', 'submenu': None},
                    'Manage' : {'action': do_manage_tasks, 'item_icon': 'list-check', 'submenu': None},
                    'Upload' : {'action': do_chart3, 'item_icon': 'cloud-upload-fill', 'submenu': None},
                },
                ...
            }
        },
    },...
}

try this

def do_view_tasks():
    print('clicked View Tasks')

def do_manage_tasks():
    print('clicked Manage Tasks')

def do_chart3():
    print('clicked Upload')

menu = {
    'title': 'Menu principal',
    'items': { 
        'Home' : {
            'action': None, 'item_icon': 'house', 'submenu': {
                'title': None,
                'items': { 
                    'Task' : {'action': do_view_tasks, 'item_icon': 'list-task', 'submenu': None},
                    'Manage' : {'action': do_manage_tasks, 'item_icon': 'list-check', 'submenu': None},
                    'Upload' : {'action': do_chart3, 'item_icon': 'cloud-upload-fill', 'submenu': None},
                },
            }
        },
    },
}

# Simulate a menu selection
menu_selection = 'Home'
selected_item = 'Manage'

if menu_selection == 'Home':
    submenu = menu['items'][menu_selection]['submenu']
    if submenu is not None and selected_item in submenu['items']:
        action = submenu['items'][selected_item]['action']
        if action is not None:
            # Call the action (click event handler)
            action()

1 Like

I am grateful for your response @Hiro :hugs:. I apologize for not explaining well. I want to execute code only when one of the submenu items has been selected, but I don’t know how to do it. However, for the menu items, it is implemented as if menu_selection == 'Home':. Please, I need your help with this, and here is the code used: streamlit_option_menu component for Streamlit · GitHub

menu = {...}

def show_menu(menu):
    def _get_options(menu):
        options = list(menu['items'].keys())
        return options
    def _get_icons(menu):
        icons = [v['item_icon'] for _k, v in menu['items'].items()]
        return icons

    kwargs = {
        'menu_title': menu['title'],
        'options': _get_options(menu),
        'icons': _get_icons(menu),
        'menu_icon': menu['menu_icon'],
        'default_index': menu['default_index'],
        'orientation': menu['orientation'],
        'styles': menu['styles']
    }
    with_view_panel = menu['with_view_panel']
    if with_view_panel == 'sidebar':
        with st.sidebar:
            menu_selection = option_menu(**kwargs)
    elif with_view_panel == 'main':
        menu_selection = option_menu(**kwargs)#This contains only "Home" items options and it's ok
    else:
        raise ValueError(f"Unknown view panel value: {with_view_panel}. Must be 'sidebar' or 'main'.")
    if menu_selection == 'Home':
        print('selected Home')#This works fine when I selected the menu item "Home"

How do I capture which submenu item has been clicked without executing a function within each submenu item?

Anyway, I appreciate your response. I solved my problem by creating a function and calling it only for the subitems that I want to execute.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.