Navigation bar on top

[Arthur8]

Will it ever be possible to have a streamlit native navigation menu on the top of pages, since there is already an empty bar?

[blackary]

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

[Arthur8]

Thanks blackary for the simple workaround . Any suggestions to make it mobile responsive?

I am looking at css markdown but haven’t found a good way so far. External libraries for horizontal menu come with their own issues.

[Arthur8]

Found a solution for better mobile navigation! Added to blackary’s navbar, a hamburger style sidebar widget for mobile users. Works well so far. Please do comment if you know better ways .

import streamlit as st

st.markdown(
    """
    <style>
    /* ───── Remove header & padding on top ───── */
    [data-testid="stHeader"] {display: none;}
    [data-testid="stMainBlockContainer"] {padding-top: 1rem;}
    
    /* ───── Hide overflowing navbar columns ───── */
    .st-emotion-cache-ocqkz7.eiemyj0 { /* Target navbar container */
        height: 35px; /* Adjust height for logo size */
        overflow: hidden;
    }
    
    
    /* ───── Move sidebar toggle to the right and replace SVG ───── */
    [data-testid="stSidebarCollapsedControl"] {
        position: fixed;
        right: 3rem;
    }
    [data-testid="stSidebarCollapsedControl"] svg {
        display: none;
    }
    
    [data-testid="stSidebarCollapsedControl"]::before {
        content: "☰"; /* Hamburger menu icon */
        font-size: 24px;
        position: fixed;
        right: 3rem;
    }
    
    
    /* ───── Display sidebar button based on screen size ───── */
    @media (min-width: 640px) {
        [data-testid="stSidebarCollapsedControl"] {
            display: none;
        }
    }
    
    @media (max-width: 639px) {
        [data-testid="stSidebarCollapsedControl"] {
            display: flex;
            justify-content: flex-end;  /* Align hamburger icon right */
        }
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Add page links to sidebar
with st.sidebar:
    st.subheader("Navigation")
    for page in pages:
        st.page_link(page)