Render another streamlit page through navbar

[hmh0490]

Hi there!

I am a newbie and I just cannot figure out how to render another streamlit page through the navigation bar. I have a multi-page streamlit app: Home and Contact Me page, the Contact_ Me.py is in the folder called “pages”. So far so good. Now, I want to use the option menu bar library to create a navigation bar instead of the sidebar and I did manage to do that. However, when I click on Contact Me in the navigation bar, I want to be navigated to the Contact Me page and I just cannot figure out how to do that.
Btw. I like the sidebar, but on mobile view nobody notices that there are multiple pages, this is why a navbar on the top of the page would be more user friendly.
Many thanks for your help!!

[dataprofessor]

Hi @hmh0490

Thanks for your question. It seems that the multipage feature and the streamlit-option-menu are conflicting with one another. I would recommend to choose one of these to build the entirety of the app. From your explanation it seems that you’d like to go in the navbar route and thus a single page app would be the recommended route.

There’s a third route which is to add custom CSS and this is shown in a video that I made a while back (https://youtu.be/hoPvOIJvrb8) the GitHub repo with code of the app is in the video description.

Hope this helps.

Best regards,
Chanin

[hmh0490]

Hi Chanin,

Thanks for your feedback! Option 3 is great, however, based on the video it has its shortcomings and those might not look too professional. Since I plan to add more pages, I do not think option 2 is optimal either. Nevertheless I have a temporary solution, namely I added a hyperlink to the current text and that will guide the users to the contact me page. Again, thanks for your suggestions! It’s very useful to know about those features.

Best regards,
Hanh