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

This is the error still showing in my console

Hello, @victoryhb! First of all, congrats on your creation! Itā€™s trully amazing! I have a doubt regarding one thing: Is it possible to change the frontend menu through the backend? What happens is that after running a model training I would like to go back automatically to the home page, but Iā€™m not able to send this to option_menu this command. It brings me the error that Iā€™m trying to create two option menus, one with the command coming from the front end and the other coming from the backend. Thank you!

options = option_menu(ā€œMain Menuā€, [ā€œInput Dataā€, ā€œData preparationā€,ā€œparametersā€,ā€œotherā€],
icons=[ā€™ box arrow in down ', ā€™ wrench adjustable ā€˜,ā€™ bar chart line ā€˜,ā€™ map '], menu_icon=ā€œcastā€, default_index=0)
options
hello.
I use this code but when running it, the icon of options doesnā€™t show.
is need to do code for using bootstrap icons?

Hi @victoryhb this is a great little component, do you know if thereā€™s a way to use this in combination with the new official multi-page feature Streamlit recently announced? Introducing multipage apps! šŸ“„

Weā€™d like to use this new mutli-page functionality to be able to break up the app a little more but I really like the visual styling of your options-menu (and ability to use bootstrap icons) better than the default Streamlit emoji-type menu for multi-page apps shown in the blog post above.

Have you tried it with the ā€œ-ā€ between the words of the icon names instead of spaces? ā€˜box-arrow-in-downā€™ instead of ā€˜box arrow in downā€™

Demonstrated here.

1 Like

Perfect, thank you!!

1 Like

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)

Hi, when I put orientation=ā€™ horizontalā€™ they not working.

Please explain.

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


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

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

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

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

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

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

Can you show me your code output?

The output GIF is shown below the gist code.

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.

@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

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!