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
84

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)

85

Hi, when I put orientation=’ horizontal’ they not working.

16608301560874065978645425780934
166083015608740659786454257809341920×2560 224 KB

Please explain.

86

@Imran_Ullah Can we see some code that highlights this issue? I just tested my own apps that use this component and the orientation='horizontal' parameter works fine.

87

IMG_20220821_140337_699
IMG_20220821_140337_6991920×1440 92.3 KB

IMG_20220821_140318_784
IMG_20220821_140318_7844160×3120 706 KB

With st. Sidebar():
They not working properly.

88

In the sidebar they don’t fit its width so the items wrap. Try putting in the main section.

89

Sure, but when I using two streamlit components they looking ugly. You can try your self.
Spacy_streamlit and streamlit-option-menu…

90

In the sidebar stack them vertically, in the main area horizontally. E.g., see my post above.

91

Is it possible to maintain the navbar with other streamlit components.

Mean if I use navbar with spacy-streamlit component for attractive web page.

92

Can you show me your code output?

93

The output GIF is shown below the gist code.

94

Hi @victoryhb,
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. :grinning:
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.

Thanks.

95

@victoryhb
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.

href

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?

1 Like
96

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!

97

Hey @Austin_Shearin,
I acutally found a hacky solution to this problem:

You need to go into your Python environment’s lib\site-packages folder and locate the streamlit_option_menu folder there.

  1. Go to \Lib\site-packages\streamlit_option_menu\frontend\dist\js and you will find some file app.*****.js
  2. 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.
  3. 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.

1 Like
98

Thank you @Wally for the suggestion. I will give it a try! I agree with you that the component needs an argument to be able to toggle this behavior.

99

Very nice component, thanks for sharing !
It seems that not all icons from bootstrap-icon are available, fire or rocket for example, or miss I something ?

100

I wrote a small script to patch this behavior as well. Sharing here.

import os
import site
import glob

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:
            fileout.write(mod_contents)
1 Like
101

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

102

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

103

@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!