Navigating to pages

Using Streamlit
,
1

Hi, I have created a multipage app on streamlit using a navbar instead of a sidebar using the below code.
page = [“Home”, “Quality Controls”, “Vocabulary Mapping”, “Cohort Discovery”]
selected_page = st_navbar(page, logo_path=logo_path, options=options)

functions = {
“Home”: show_home, # imported functions from another python script
“Quality Controls”: show_qc,
“Vocabulary Mapping”: None,
“Cohort Discovery”: show_cohort,
}
go_to = functions.get(selected_page)
if go_to:
go_to()

But I am trying to create an additional feature on the main home page which shows a summary of a few mutlipages. I am trying to get clicking on the image or title in the summary to navigate to that main page. I can seem to use switch_page since I am not using the side bar. The below is where I am trying to add the navigation -
pg1, pg2, pg3 = st.columns([1, 1, 1], gap=“large”)
with pg1:
st.image(“assets/qc.png”, use_column_width=True)
st.title(“Quality Controls”)
with pg2:
st.image(“assets/map.png”, use_column_width=True)
st.title(“Vocabulary Mapping Assistant”)
with pg3:
st.image(“assets/ERD.png”, use_column_width=True)
st.title(“Cohort Discovery”)

2

Hey @DeeTherese! Welcome to the community!

I think you have a lot of things working here. I’m trying to understand the goal. You mention here:

I am trying to get clicking on the image or title in the summary to navigate to that main page.

I don’t believe there’s an easy way to have images become links without adding some HTML/CSS (we can talk more there). You could try st.page_link which will provide a button, or you can combine st.switch_page with an action like so:

if st.button("Go to this page"):
    st.switch_page("this_page.py")

Docs on st.switch_page is here. Let us know if you have any more questions.

4

Ah. The custom component handles navigation differently. There may be some interaction with the custom component that could help here, but we would need to go into the details.

Perhaps @gabrieltempass might be able to provide some tips here :slight_smile: .

1 Like
5

In order to create a multi-page streamlit app , this medium is a very good read .