Will it ever be possible to have a streamlit native navigation menu on the top of pages, since there is already an empty bar?
1 Like
There’s not a native version of this yet, but you can make something that looks reasonable using st.navigation(position=‘hidden’) and st.page_link
import streamlit as st
def page1():
st.write("This is the home page")
def page2():
st.write("This is the filter page")
def page3():
st.write("This is the settings page")
def page4():
st.write("This is the map page")
pages = [
st.Page(page1, icon=":material/home:", title="Home"),
st.Page(page2, icon=":material/filter:", title="Filter"),
st.Page(page3, icon=":material/settings:", title="Settings"),
st.Page(page4, icon=":material/map:", title="Map"),
]
current_page = st.navigation(pages=pages, position="hidden")
st.set_page_config(layout="wide")
num_cols = max(len(pages) + 1, 8)
columns = st.columns(num_cols, vertical_alignment="bottom")
columns[0].write("**My App Name**")
for col, page in zip(columns[1:], pages):
col.page_link(page, icon=page.icon)
st.title(f"{current_page.icon} {current_page.title}")
current_page.run()
It’s not perfect, but it does work
2 Likes