A few more questions on Multi-Page Apps

Using Streamlit
1

Hi All,

I am looking to use Streamlit multi-page app feature to prototype a web portal. Think of it as exposing a multi-sheet Excel model onto the web. The MultiPage function has lots of potential. I really like the page load mechanism. I’ve hacked something similar using NavBar menu link and QueryParam for pageID. But the pages reload and flash on each transition. However the multi-page function is missing some features I need. It’s getting close with some solutions provided by @blackary (thanks much). But don’t think I can use it yet. I also like to new st.tabs as menus.

I am looking for:

  • Navigating to a page by code. Solution
  • Navigating to a page by hyperlink (like menu items). Same solution as above, may be with style override to make a button look like a link. Not sure if this will work.
  • An option to not show the sidebar by default. When I try to control it by CSS, it still flashes.
  • The workaround to control the page list on the sidebar is helpful. link
  • A menu bar at top similar to a web portal which I can specify which page to load when a menu item is clicked… (looking similar to this)

Sorry for so many questions. I’ve been researching for the last week as to what the best approach would be. I am looking at my NavBar+QueryParam hack, Hydralit framework, and multipage function. I would like to go with MultiPage if I can. Trying to decide quickly since I need to start implementing the actual content pages. Each of these options requires a slightly different framework to start.

Any insight, discussion, or advice is welcome.

Thanks much,
AndyW

2

  1. For navigating by hyperlink, I think your idea of a style override is a good one. Here’s some example code to start css - How to make button look like a link? - Stack Overflow

  2. To make the sidebar hidden, you can use st.set_page_config(initial_sidebar_state="hidden") st.set_page_config - Streamlit Docs

  3. I think the best option for a top navbar involves something like the suggestion, with html and css inserted via st.markdown. However, I believe that by default any links clicked will open in a new tab, and I’m not sure if there’s a workaround to avoid that. You might be able to accomplish the same thing by styling some buttons from your bullet #2.

Hopefully that’s helpful.

1 Like
3

Thank you, @blackary. Very helpful.

From the doc, I used

st.set_page_config(initial_sidebar_state="collapsed")

to hide the sidebar. However when the “pages” folder exists, the sidebar automatically shows, then collapses. When the “pages” folder is not there, then I get the behavior I was hoping for. Is there any way around this?

4

@asw888 There’s actually a config option that you can set in .streamlit/config.toml

[ui]
hideSidebarNav = true

You can still take advantage of the automatically-created urls for each page, but the sidebar won’t show at all. I had forgotten about this option!

1 Like
5

That one-line magic worked! Very cool. The page load looks very clean now. Thank you!!

2 Likes
6

Excellent!

7

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