@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. Sorry I didnāt share mine in the first place. Never thought someone else would really be interested in this
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)
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.
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?
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:
- some sort of integration of this package with the native multipage functionality (where each page has its own endpoint)
- 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.
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},
},
...
}
},
},...
}