Is there a way to disable the entire option-menu or only some of the options within the menu (i.e. make them “not clickable”)? Maybe by using some CSS?
How can I style the menu in horizontal mode to give every option only a fixed width/just as much width as it needs instead of having the entire menu to span the whole width of the container it is placed in? (for example if you just have 2 options, the menu will create 2 large buttons across the screen width which can look weird)
first of all, thank you very much for this wonderful component. I am using it in my current app and plan to continue to do so.
Though, one thing I am struggling with is the follwing: If there is a scrollbar in the page/sidebar (i.e. there is more content on the page than can be displayed on screen) and let’s say you put the streamlit-option-menu component on top, then upon clicking on one of the menu options the site will refresh AND scroll down so as to pin the menu on top of the page/sidebar. This issue has also been mentioned on GitHub: On clicking an option it scrolls to pin the widget on top of the page. · Issue #13 · victoryhb/streamlit-option-menu · GitHub
Is there any solution to this problem? Is it dependent on the streamlit version?
I am currently on 1.11.
I found the reason for the descirbed behavior above: It happens because every <li> element contains a <a> with href='#'. If I delete the href attribute the page is not “jumping” anymore.
While I see how this behaviour may be beneficial, there are also situations in which you do not want the page to “jump”. Especially in horizontal orientation of the widget, because then the page is scrolled just BELOW the component.
Is it possible to include a switch for controlling whether href is set or not?
I’m facing the same issue as Wally has pointed out above. I would really like the page to not “jump” around after a selection. I have a title image above a horizontal option menu and the title image is always scrolled past when an option is selected. Other than that, fantastic component!
You need to go into your Python environment’s lib\site-packages folder and locate the streamlit_option_menu folder there.
Go to \Lib\site-packages\streamlit_option_menu\frontend\dist\js and you will find some file app.*****.js
Open it in text editor and replace any href:"#" with href:"#dummy" (you will find two different locations). Actually anything else than “dummy” will work too… just make it something you don’t use as an anchor.
Save the file.
I actually wrote myself a little python script to “patch” this .js file after installation as described above that I plan to ship with my streamlit app.
I wrote a small script to patch this behavior as well. Sharing here.
site_packages = site.getsitepackages()
for site_package in site_packages:
option_menu_js = os.path.join(site_package, "streamlit_option_menu/frontend/dist/js/*.js")
js_files = glob.glob(option_menu_js)
for js_file in js_files:
with open(js_file, "r") as filein:
contents = filein.read()
mod_contents = contents.replace("href:\"#\"", "href:\"#dummy\"")
with open(js_file, "w") as fileout:
Can you use this with Multipage apps? OR do you need to define the menu bar for each page?
I’m looking to use to to nav to different pages but would like to only define it once vs putting it on each page
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!
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.