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ā
Perfect, thank you!!
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)
@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.
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ā¦
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?
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.
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.
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!