Streamlit-option-menu is a simple Streamlit component that allows users to select a single item from a list of options in a menu

Custom Components
70

Hi all (@victoryhb),

I’m building an app and wanted to have a simpler way to describe nested menu structures with this nice component. I came up with something like this below (a simple example) along with the code that runs it:

menu = {
    'title': 'Todo App',
    'items': { 
        'Home' : {
            'action': None, 'item_icon': 'house', 'submenu': {
                'title': None,
                'items': { 
                    'View Tasks' : {'action': do_view_tasks, 'item_icon': 'list-task', 'submenu': None},
                    'Manage Tasks' : {'action': do_manage_tasks, 'item_icon': 'list-check', 'submenu': None},
                    'Upload Tasks' : {'action': do_upload_tasks, 'item_icon': 'cloud-upload-fill', 'submenu': None},
                },
                'menu_icon': None,
                'default_index': 0,
                'with_view_panel': 'main',
                'orientation': 'horizontal',
                'styles': styles
            }
        },
        'Settings' : {
            'action': None, 'item_icon': 'gear', 'submenu': {
                'title': None,
                'items': { 
                    'Manage Credentials' : {'action': do_credentials, 'item_icon': 'key', 'submenu': None},
                    'View Logs' : {'action': do_logs, 'item_icon': 'journals', 'submenu': None},
                },
                'menu_icon': None,
                'default_index': 0,
                'with_view_panel': 'main',
                'orientation': 'horizontal',
                'styles': styles
            }
        }
    },
    'menu_icon': 'clipboard2-check-fill',
    'default_index': 0,
    'with_view_panel': 'sidebar',
    'orientation': 'vertical',
    'styles': styles
}

In theory this dict object could be externalized in a json file. The menu renderer, show_menu(), can be modified to consume and display the json representation. You could then display different menus depending on authorization rules, for example. In a similar vein, the menu scheme can be easily augmented with role scope attributes that the menu renderer uses to include/exclude menu options.

Hope someone finds it useful.

Arvindra

3 Likes