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
104

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,

105

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

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

107

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:

108

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

Screenshot 2023-06-26 at 5.08.38 PM
Screenshot 2023-06-26 at 5.08.38 PM1886×796 47.1 KB

109

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

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.

111

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

113

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

114

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)

115

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.

116

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

117

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

118

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

119

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.

120

how did you do it?

121

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!

123

Hi CHerSun,

thanks for your suggestion. I’m trying to implement using extra-streamlit-component and streamlit-option-menu. I mainly find one issue, when trying to execute the demo that is given with extra-streamlit-component for the router component, the path isn’t correctly updated. May I ask you what configuration did you apply?

Thanks a lot

124

Hi @victoryhb, we are facing a problem where if there are more than 10 items in the option-menu, the items cannot be added to the menu to be displayed. We are using it similar to a selectbox and would like to have it store more than 10 items and continue to grow. Is there a place we can update the parameters for it?

125

Excellent! Thank you.