-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Coming soon] Multi-page apps: Improved API and new navigation UI features #8388
Comments
Hello @sfc-gh-jcarroll , Would it be possible to play with the current version on a small demo or to try it out locally on my repo (in order to provide better feeback, not to deploy it like that) ? Real icons in addition to emojis will be awesome as well: is this going to be only for the navigation to start with, or rolled out globally before the navigation ? Also, I guess the "hidden" navigation arguments opens up the possibility of using the API with say a custom topbar/navbar from Material UI for example ? Looking forward to try this out ! |
Glad you like it! We'll add the real icons in other places soon too. Yes, I think you could use a custom topbar / navbar too (BTW this is already possible by setting config We don't yet have a demoable WHL file but will share it when we do :) |
We have a preview whl file available for early testing and a demo app. Check it out here. The whl is linked once you click "Login" https://multipage-v2-preview.streamlit.app/ Note: there are some known bugs on the whl file since it's an early version |
Looks really good but the sidebar keeps closing and reopening when I change pages. It's frustrating and makes navigation difficult. Is this intentional or a bug? Also, will there be an option to control this behavior in the |
Hi @RusabKhan - it doesn't sound like an expected behavior, is it something you could record a quick video to show the behavior you are seeing? We are also improving and fixing bugs in the preview WHL so it's possible an upcoming improvement will address this. Thank you! |
Hi @sfc-gh-jcarroll , I have finally had time to give it a go, love it so far 馃殌 I then moved all the pages to As for the one entrypoint to execute all common code (like auth) it's a great idea. Great potential 馃憤 |
trim.DBDB18DD-3367-4EC7-A3C3-9F7454A092BD.MOV |
Thanks @RusabKhan - no this is definitely not intended behavior. Can I ask about your device / browser and internet speed? It looks like Safari? Thanks for the video! |
@sfc-gh-jcarroll your welcome, Device: iPad 10th Gen |
Visiting pages via the URL doesn't work, it fails to find the page and redirects to the default page instead. (Which in turn also affects page reloading.) page_dict={'106a6c241b8797f52e1e77317b96a201': Page(page=<function home at 0x795e6414d440>, title='home', icon=':material/home:', default=True, _url_path=''), '17e477fe899e29fb93a2117a6a9baadf': Page(page=<function p1 at 0x795e6414d4e0>, title='page 1', icon='', default=False, _url_path='p1'), 'd10adbb5b95064f051384d087c73ff59': Page(page=<function p2 at 0x795e6414d580>, title='page 2', icon='', default=False, _url_path='p2')}
could not find page for 53b9ec3d2e04403081a24ab499835919, falling back to default page import streamlit as st
def home():
pass
def p1():
pass
def p2():
pass
main_page = st.navigation(
{
"Overview": [
st.Page(home, title="home", default=True, icon=":material/home:"),
],
"Other": [
st.Page(p1, title="page 1"),
st.Page(p2, title="page 2"),
],
}
)
main_page.run() |
This is a great feature. As I understand (correct me if I'm wrong), the st.navigation() will create navigation in sidebar only. Can it be used outside of sidebar or can we use this to create the actual navbar? I saw this custom component link. If the proposed st.navigation() can be used to create the actual navbar, it will be very useful. Streamlit doesn't has the navbar component. |
I am running your demo script. In my config, if I set fileWatcherType = "auto", then I get this error:
If I set fileWatcherType = "none", then it works. Any idea why file watcher is breaking? |
Yeah, the latest whl has an issue if watchdog isn't installed. We're working on fixing it :) in the meantime, |
Will this feature support pages defined in subfolders? For example, will we be able to do this? |
It already does, just not the So, anything other than st.Page("app_pages/entertainment/movies.py") |
^ Yep what @nozwock said is correct |
Would it be possible to set the page slug independently of the page title? I would like to dynamically load my multipage app with different languages, but I want to keep URL's the same for easier reference for users when tracking bugs. I see the 'key' variable has been removed, but I feel like that would be a great addition to this new functionality to give us some more options. |
Hey @sfc-gh-jcarroll , First a remark, currently when you start the webapp there is a small time window where the layout in the sidebar appears "as usual" : name of the entrypoint file (demo in my case) then a list of all the file names in With this new navigation, how are you going to handle The favicon changing to the current page icon is very nifty, but not very convenient in my use case: will this be optional ? Finally, is there a plan to create a kind of default "landing page" with cards leading to the pages mapped in the navigation grouped by their section headers ? I could probably make it myself, just wondering if it was in the plans 馃憤 Thanks again, |
@dowlle yes, we had a little complexity around that feature but we plan to add the kwarg back for setting a different title vs url-path before launch (or maaaybe soon afterward if we run into problems but I think we have a clear path) @gaspardc-met thank you for the encouraging feedback!! 馃槃
Let me know if those answer the questions / concerns or if anything is still unclear! |
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.
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! 馃殌 |
Hey @sf-gh-jcaroll, the original issue I reported in this thread has changed its behavior. Now, when changing pages from the sidebar, the first click does not register, and on the second click, the sidebar collapses. trim.D0B23796-13FE-4842-9E83-CD77AC66E3B1.MOV |
Hello @sfc-gh-jcarroll, Small window with the old layout: page_link broken: Fixed favicon: Landing page: We've deployed the 1.34 mpa-v2 wheel to our demo environment to great positive feedback internally, so kudos to the streamlit team 馃憦馃徏 |
Thanks @RusabKhan - I think the "duplicated pages" is just that I was lazy and made the same content on the first two pages of that app 馃槄 The other behavior of the sidebar collapsing seems to be an existing Streamlit behavior whenever the screen width is below a certain point, not specific to the updated Multipage App (I can see the same thing on llm-examples.streamlit.app for example). I'm not sure if that behavior changed from an earlier version. If you think it's a bug or that the behavior should change, feel free to file a separate issue for discussion (you can tag me if you like) @gaspardc-met for favicon:
Oh, interesting idea! The current behavior is similar to the existing MPA. Since we have |
Hi folks! 馃憢
I wanted to preview a new way to define multi-page Streamlit apps and some new features coming to the side navigation. We're aiming to release these updates within the next 2 months.
pages/
will still work just fine 馃檪Update: Check out the 馃憠 demo app 馃憟 & whl file!
https://multipage-v2-preview.streamlit.app/
Summary
Using the new API, when you do
streamlit run streamlit_app.py
, the contents ofstreamlit_app.py
will automatically run before every page instead of defining the home page. Any common code can go here.st.navigation()
withst.Page()
to programmatically define the available pages of your app.Here's how a native side navigation might look using all the new features:
Here's the simplest example of how this would look in your app code:
Pages can be defined by path to a python file, or passing in a function.
New navigation UI
Here's a fuller example with a logo and section headers.
Logos
Calling
st.logo(image)
adds an app logo in the top left of your app, floating above the navigation / sidebar.Material icons
You'll be able to use a wide range of Material icons for page navigation and other elements that support
icon=
today. Our current plan is to support the Material icons built into @emotion. You can specify these via shortcode, such asicon=":material:Archive"
. The final details of this might change a bit before release.Navigation headers
By default,
st.navigation
expects a list of Pages (List[st.Page]
). However you can also passDict[str: List[st.Page]]
. In this case, each dictionary key becomes a section header in the navigation with the listed pages below. E.g.Dynamic navigation
The available pages are re-assessed on each rerun. So, for example, if you want to add some pages only if the user is authenticated, you can just append them to the list passed to
st.navigation
based on some check. E.g.:You can also set
position="hidden"
on st.navigation if you want to use the new API while defining your own navigation UI (such as viast.page_link
andst.switch_page
).We're still putting the final touches on this feature so the final API and UI might change slightly. But we're excited about this and wanted to share, so you know what's coming and in case you have early feedback! Thanks!! 馃巿馃巿
The text was updated successfully, but these errors were encountered: