How can i integrate multiple pages using top navigation bar

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.

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

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")

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.