📖 [Launched!] Multi-page apps: Improved API and new navigation UI features

Is there a plan to support horizontal nav bar?

And responsive.

image

1 Like

We built the API for st.navigation() with a horizontal / top navigation bar in mind (note the position= argument :wink: ). It won’t be supported in the first version but definitely thinking about it.

Not sure about the responsive / collapsed version, need to think about that more but it could make sense!

1 Like

Very important for smaller devices. People not in the office or home have to also appreciate how cool the streamlit app looks on their mobile devices.

1 Like

Hi folks, we recently posted an updated preview WHL file for this feature which has the near-final behavior. We’ll plan to launch this in the next release version 1.36 in mid-June.

  • Please share any bugs or un-intuitive behavior you find in the WHL file so we can address it before the launch. In our testing it looks pretty good!!
  • This version includes the url_path= kwarg in st.Page() to explicitly set the slug, e.g. st.Page(fn, url_path="metrics", title="Key Metrics"). The basic case works, however we will fix some encoding bugs and also might change the behavior a bit before launch.

Again, you can see it in action at https://multipage-v2-preview.streamlit.app/

Thanks for all the amazing feedback to improve this feature! Looking forward to the launch! :rocket:

1 Like

Hello! I have been using WHL since the beginning. This is the third one I’ve tested.

In the first one, when I updated the code it did not update the page when clicking on the menu item. It was necessary to stop the “streamlit run” (CTRL C) and start again.

This week I installed the second WHL that I found on GitHub and it is able to update the page. However, if I’m not mistaken, the current WHL doesn’t do the same.

I noticed that the sidebar is behaving correctly now, unlike the other two I tested.

The feature is getting excellent.
Thank you for your work!

Thanks so much @desenvolvimento2nova for this report! I was also able to reproduce this issue when loading a page from a file and editing that file. We will make sure and get it fixed in the final version.

1 Like

Pages not supported?


  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.168.254.127:8501

2024-05-25 07:30:56.225 st.navigation was called in an app with a pages/ directory. This may cause unusual app behavior. You may want to rename the pages/ directory.

If you use both a pages/ folder and st.navigation(), Streamlit can get confused since it won’t deterministically know when it starts which one you want to use.

While it can technically work (with a few possible visual glitches especially right when the app opens), it’s better to store your page files in any other directory name when using st.navigation(). So the log just informs you about this behavior.

We could add a config option in case someone really wants to use st.navigation() with a folder called pages/, feedback welcome.

is it possible to build the whl on 1.35? thanks!

I rename the pages folder name to page and it worked.

Now adding set_page_config() in one of the pages under the page folder generates an error. Why?

Note, I added set_page_config() in Home() function and basketball.py page under the page folder name.

Issue on reloading the page.

image

1 Like

In this case, you’re calling st.set_page_config() twice, which is still not allowed: once in the main script, and then again from basketball.py inside the pg.run().

So you’d probably want to either:

  1. Call set_page_config() only once, in the main script, OR
  2. Call set_page_config() within each page with the relevant settings for that page

@ferdy Not sure about the refresh not working, can you provide a more detailed repro? Is it the same issue of code updates not showing up until you restart the Streamlit server? (we’re working on a fix for that)

In the main page, I have a Home() defined in navigation. This page calls set_page_config() for the Home function. The other pages are in the sports folder. They also have a set_page_config().

Sample code is in github

Navigating to basketball page pops up this error message.

I only tested this locally on windows 10 and python 3.11.

In another case, if you select basketball or soccer or cricket page in the sidebar navigator and reload the page - it will not reload.

Thanks for posting the code! If you comment out this line, you’ll remove the double st.set_page_config call as I mentioned, and your app will work as expected. I cloned the app and ran it locally and made this change, and everything worked fine :slight_smile:

Deleting that line worked without issues. But what if I change it to wide? Was centered.

st.set_page_config(layout='wide')

Looking forward to bring this into a current project! Already an estimate when we can expect the release? :slight_smile:

1 Like

This feature was launched today in Streamlit 1.36 :rocket: ! Let us know how you find it! :slight_smile:

4 Likes

Got issue with reloading the page

can only reload the main page http://localhost:8502
but no specific page like: http://localhost:8502/importfiles

1 Like

I placed an issue on this in github.

If you read back, I also reported this issue.