Behavior of st.navigation for hidden position

Using Streamlit
1

Hello everyone,

Python : 3.11.9
Streamlit : 1.37.1

I have a local streamlit app, the main file is named app.py, I have a folder pages/ at the root with one page admin.py.
I have a custom sidebar, in which I display a button for a specific group of users and when user click on it I redirect him to the admin page using st.switch_page("pages/admin.py")

Without doing nothing more, a navigation appears at top of my sidebar, from my understood it’s a default behavior once you create a pages/ folder.
But this navigation component is unwanted, in order to remove it, I’ve seen that I could create one myself and hide it with the following :

st.navigation([st.Page("app.py"), st.Page("pages/admin.py")], position="hidden")

By doing this, indeed the navigation component is no longer rendered, but my st.switch_page button does no longer works. The url goes from http://localhost:8501/ to http://localhost:8501/admin but the / page meaning app.py is still being rendered, with no redirection to the admin page.
In adition to that, this appears in the console :
2024-09-13 19:40:27.562 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.

So I tried to rename the folder pages/ to page/ but got the following :

raise StreamlitAPIException(
streamlit.errors.StreamlitAPIException: Could not find page: `page/admin.py`. Must be the file path relative to the main script, from the directory: `app`. Only the main app file and files in the `pages/` directory are supported.

One idea, was to let streamlit do his thing and render default navigation component and then hide it using css style.
But two things :

  • When a navigation component is created, it is included in a sidebar, and when you don’t have one yet, it creates one. So when user access to the app and they’re not logged yet, nothing is displayed except a login form. But due to the navigation component, an empty sidebar is displayed
  • Once the user is logged in and the whole app is rendered, even if the navigation is hidden using CSS, when re running the app, you can quickly see the navigation, which I don’t want because users that are not supposed to access admin page can see this page name.

login_no_hidden_and_css
login_no_hidden_and_css844×324 6.44 KB

I cannot solve this issue yet and help would be appreciated.
The best would be to solve this issue without using css.

Thank you,

2

Up, I would really appreciate any answer or hint on this.
Thank you,

3

Without building using st.navigation and st.Page, you can hide the navigation with the configuration option client.showSidebarNavigation.

As for trying to use st.navigation, are you running the page? You need to call .run() on the object returned from st.navigation. This is the command to run (and render) the page. Your entrypoint file becomes a page router for your app when you use st.naigation and can contain elements in common across all your pages, like a picture frame for your pages. So, you need to say where in that entrypoint file the selected page runs.

1 Like
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.