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

@jquest - Sure, my example above which uses this component does just that. The ā€œHomeā€ menu item has multiple tasks, each one is a different screen (or page).

@Austin_Shearin
This looks very much like my patching script. :slight_smile: Sorry I didn’t share mine in the first place. Never thought someone else would really be interested in this :sweat_smile: Happy to see it worked for you as well!

Hi there,
could you kindly share the code to reproduce this? I’m new to streamlit and this would be a great help.

Many thanks,

But can it be used with the pages that are located in separate files in the pages folder?

The hacky solution I currently use is the switch_page function from streamlit-extras:

if selected != pages[current_page_index]:
        switch_page(selected)

@victoryhb hello, Can this be modified to add python pages in option Menu

In case you are still reading this:
Someone proposed a technically far better solution than mine and the issues was fixed on Github yesterday. The commit has already been merged, so this one got finally resolved. :sunglasses:

hey.
I tried using this model in my VS code and installed it using ā€œpip install streamlit-option-menuā€.
but it says the following this despite all the requirements are satisfied.Please help .
I have MacBook M2 chip

We have two main suspects:

  • The installation failed. You should be able to tell whether this was the case by the output of the command.
  • You installed streamlit-option-menu in one environment but running the code in another environment.

Make sure vscode is running the same python distro in which you pip-installed streamlit-option-menu. Check the correct distro is showing in the bottom right of the vscode status bar. Then type pip show streamlit-option-menu in the vscode terminal to verify installation.

Thanks @victoryhb ! Loving this feature.
Is there a way to include dumb sub-header text in the option-menu, like in the following figure? If not, is there still a hacky workaround to do it?

image

No, this example is rendering functions on a single page app. It doesn’t use the new streamlit multipage feature which has unique urls

Noticing a common trend in this thread - that we want to be able to rerender the ā€˜page’ functions outside of just clicking the navigation bar.

I see two options to do this:

  1. some sort of integration of this package with the native multipage functionality (where each page has its own endpoint)
  2. Using state to rerender page based on a change in state

I have tried the state method, but unfortunately proven unsuccessful. Has anyone got a working demo of this?

This is my current implementation:

# Home.py
if st.session_state.active_page == "Corpus":
    corpus()
elif st.session_state.active_page == "ChatBot":
    chatbot()
elif st.session_state.active_page == "Analytics":
    analytics()

# sites.Corpus.py
if scrape_btn:
    with st.spinner('Loading articles...'):
        st.session_state.sd.scrape_articles()
    st.session_state.active_page = "ChatBot"   
    st.experimental_rerun()

Unfortunatley this doesnt work, and the active_page reverts back to Corpus (the page it is on)

Yeah you’re right. At the time, it seemed plausible but no it does not work as intended. I noticed on the latest update there is a manual_select param. This could be used in conjunction with switch_pages which basically navigates to the pages on click via custom navigation - button, tab etc.

Again my apologies. Got excited when I first saw it and was eager to share.

Maybe my custom component StreamlitAntdComponents can help you.
Check the menu usage in demo app.

Hmm, I don’t quite get this multipage and streamlit-options-menu problem.

Why not use st-pages with multipage, if you want to customize that?

Or Router (streamlit-extra-components) + any menu (streamlit-options-menu for a flat one; StreamlitAntdComponents for hierarchical).

hi, can someone help me to use the manual_select function, it is not working.
I need to redirect to another selection in my menu after hitting a button

Hello,
I’ve done a quite complicated multipage system with streamlit and just wanted to say that I noticed that it seems not possible to dynamically change the value of the selected (default) value. It is possible for the value of every options but not which one is selected.
Thanks for the widget which was very useful.

how did you do it?

Thanks for making such a great component to allow more possibilities for my app! But there is one main question and also the most wanted feature, can you add a menu on top or at the bottom of the function, so that when I browse the long content can also easily switch to other tabs!

Hi everyone. I want to handle when submenu item is selected example when only ā€œManageā€ is selected display some chart. 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},
                },
                ...
            }
        },
    },...
}