Maintaining navigation menu when navigating pages

Using Streamlit
1

Hi everyone.

I’m wondering if anyone knows a way to maintain a navigation bar or css while navigating pages. Specifcally, when the Streamlit “loading” page shows up.

For example, if I was on home and then went to register, the entire screen goes blank while loading. I was hoping to maintain the nav bar when it was loading (nav bar doesn’t need to work it just needs to look like its there).

I’m thinking there is probably a way to edit this loading page as it seems unique with the grey bars and usually the running man but I turned that off. Hoping to insert some type of css?

Images and code below

Image of nav

image
image1087×458 15.4 KB

Loading page

image

Code:

from streamlit_navigation_bar import st_navbar
pages = ["Home", "Data", "About", "Register"]

logo_path = None
styles = {
    "nav": {
        "background-color": "royalblue",
        "justify-content": "left",
    },
    "img": {
        "padding-right": "14px",
    },
    "span": {
        "color": "white",
        "padding": "14px",
    },
    "active": {
        "background-color": "white",
        "color": "var(--text-color)",
        "font-weight": "normal",
        "padding": "14px",
    }
}
options = {
    "show_menu": True,
    "show_sidebar": False,
}

page = st_navbar(
    pages,
    selected='Register',
    logo_path=logo_path,

    styles=styles,
    options=options,
)
2

Hey @dxk5271 Thanks for reaching out and welcome back!

We actually made some changes to our multipage apps setup that I hope would work well for your use case. We now have a file that always runs first, so that would be the best place to put the navbar. I’m not sure it would fully solve your issue, but you may notice it being snappier.

Check out more about MPA using st.Page and st.navigation here.

3

Thank you, I will give this a try!

4

This worked, but it became a bit hacky because I could only call functions from a page it seemed and not directly go to that page.

My pages had some pretty complex logic and functions so it didn’t behave well.

The UI became pretty messed up if you were to navigate a bunch. And if I were to change the menu options based on authentication status it became very glitchy.

Cool concept but I don’t believe this solution is mature enough for what I’m doing.

I ended up using Django and inserting app as iframe

5

Could you share more of what you mean about not being able to go directly to a page? If you use something like this:

import streamlit as st

pg = st.navigation([st.Page("page_1.py"), st.Page("page_2.py")])
pg.run()

Then you should be able to navigate directly to pages.

If you want an example of how you can dynamically change the menu options based on authentication status, you can see this example here.

Using Django to handle navigation is certainly great if that works for you, but this should also work well with native Streamlit.