How can i integrate multiple pages using top navigation bar

Using Streamlit
1

1] I want to integrate 2 different files such that a user can navigate between the 2 using a top navigation bar.
2] Can I use streamlit option menu to navigate to other page.

2

At present, Streamlit lacks a top navigation bar. However, you could explore a community-created custom component to achieve this functionality.

To install it, run:

pip install streamlit-navigation-bar

Below is an example of how you could use it in your Streamlit app with multiple file pages:

# pages/page_1.py

import streamlit as st

def show_page_1():
    st.title("Page 1")
    st.write("This is page 1")

# pages/page_2.py

import streamlit as st

def show_page_2():
    st.title("Page 2")
    st.write("This is page 2")

# app.py

import streamlit as st
from streamlit_navigation_bar import st_navbar

import pages as pg

st.set_page_config(initial_sidebar_state="collapsed")

pages = ['page1', 'page2']

options = {
    "show_menu": False,
    "show_sidebar": False,
}

page = st_navbar(
    pages,
    options=options,
)

functions = {
    'page1': pg.page_1.show_page_1,
    'page2': pg.page_2.show_page_2,
}
go_to = functions.get(page)
if go_to:
    go_to()
1 Like
3

Im not sure why but I am getting an attribute error when copy and pasting this code exactly.

saying modules ā€˜pagesā€™ has no attribute to ā€˜page_1ā€™. I have double checked my file structures and all the names and they are all correct. Am I missing something?

# app.py

import streamlit as st
from streamlit_navigation_bar import st_navbar

import pages as pg

st.set_page_config(initial_sidebar_state="collapsed")

pages = ['page1', 'page2']

options = {
    "show_menu": False,
    "show_sidebar": False,
}

page = st_navbar(
    pages,
    options=options,
)

functions = {
    'page1': pg.page_1.show_page_1,
    'page2': pg.page_2.show_page_2,
}
go_to = functions.get(page)
if go_to:
    go_to()

page_1:

# pages/page_1.py

import streamlit as st

def show_page_1():
    st.title("Page 1")
    st.write("This is page 1")

page 2:

# pages/page_2.py

import streamlit as st

def show_page_2():
    st.title("Page 2")
    st.write("This is page 2")
4

Ensure that the pages folder, app.py, and virtual environment are all located within the same directory. Additionally, the parent folder should be the current working directory in the terminal.

5

But this solution is not mobile device friendly. Any other way?

6

Weā€™re currently working on a native top navigation bar in Streamlit (that will also be mobile-friendly), feel free to follow along here: [Coming soon] Top navigation bar for multipage apps Ā· Issue #727 Ā· streamlit/streamlit Ā· GitHub