Side by Side clicks to switch between pages

Hi, is there any options to add two or more options side by side (horizontally) and based on clicks, the pages should change and display the graphs, data etc. (I don’t want to use a sidebar or radio button). Please help me with this, if possible.

Hey @Shekar,

First, welcome to the Streamlit community!!! :partying_face: :partying_face: :partying_face: :tada: :tada: :tada:

So I have 2.5 (will explain) possibilities for you depending on if you need to nest widgets in your pages or not.

Option 1: The Button

You could use a combo of buttons and columns to layout 3 buttons horizontally and depending on which button is selected, display an entire page of graphs, data etc…

Drawback: you can’t put any more interactivity under the button, the button only remembers the click on 1 run through the script, you can use a well known session state hack to download a file that can help you get around this (although the complexity is quite high).

Checkout the code I made for an example and what it produces:

import streamlit as st
import pandas as pd

st.title("Buttons for pages")

col1, left, col2, right, col3 = st.beta_columns([1,0.1,1,0.1,1])

with col1:
    page1 = st.button("Look at a graph")

with col2:
    page2 = st.button("Look at an image")

with col3:
    page3 = st.button("The writing on the wall")

if page1:
    table = pd.DataFrame([[4,5,6],[1,2,3]], columns=["a","b","c"])

    st.line_chart(table)

if page2:
    st.image("../figures/cigar.jpeg")

if page3:
    st.subheader("You won't be able to nest any other widgets after using the button!")
    st.subheader("The memory of a button click lasts only 1 script run")

buttons · Streamlit

Option 2: The Expander

You could try using expanders to make “pages”. These do not rerun your script but instead display hidden information underneath. Although they might be more suited to a vertical stacking than horizontal (I still mocked a horizontal option for you though)

Drawback: by lining them up horizontally, whatever is displayed underneath the expander will be confined to that column. I made the page layout wide using the st.set_page_config to improve the look of this option.

The code and output:

import streamlit as st
import pandas as pd

st.set_page_config(layout="wide")
st.title("Expanders for pages")

col1, left, col2, right, col3 = st.beta_columns([1,0.1,1,0.1,1])

with col1:
    page1 = st.beta_expander("Look at a graph")

table = pd.DataFrame([[4,5,6],[1,2,3]], columns=["a","b","c"])
page1.line_chart(table)

with col2:
    page2 = st.beta_expander("Look at an image")

page2.image("../figures/cigar.jpeg")

with col3:
    page3 = st.beta_expander("The writing on the wall")

page3.subheader("You can nest other widgets after using the expander!")
page3.subheader("You are stuck displaying them in their specific columns")

expanders · Streamlit

Option 0.5: Switch buttons for checkboxes

The reason this is a 0.5 option, is you would use the exact same code as the button code I made for you above. The checkbox will be able to remember the users choice on multiple script run through’s, so you can nest additional interactivity. It will look just like the button option, except with the checkbox UI.

Drawback: using a checkbox as a page selector is a bit unusual, so you may have a problem with how this UI looks, especially in comparison with the button’s UI. However, this does solve all the horizontal page layout and additional interactivity with pure Streamlit ease!

Hope one of these options works for you!
Happy Streamlit-ing!
Marisa

3 Likes

Dear Team,

Thank you for the response and the suggestions. I can’t use options 2 or 0.5 as it won’t be so interactive. I wanted to go ahead with option 1, I tried session state hacks, but while using 3 buttons (and a nested button) everything is getting reset. If there is some related documents or suggestions to do this, please let me know.

Thanks & Regards,
Shekar

Hey @Shekar,

Can you post a gif and link to your repo for your project of what it looks like and what your trying to do? I am interested to know what you mean when you say:

Because you then go on to say that you use 3 buttons and a nested button. The checkbox (0.5 option) actually sounds like a good use here.

As this session state hack is one that was developed outside Streamlit we don’t have an official documentation that I can point you to. There are a number of people in the community that have use it though, and if you search for it in our forum there are lots of topics on people using it, maybe you will find something to help you there?

Marisa

Hi @Marisa_Smith

Thanks for sharing the solutions, I implemented the button way and it worked.

However, there is an more relevant example in the gallery of Streamlit: https://share.streamlit.io/okld/streamlit-gallery/main?p=pandas-profiling

Do you know how those tabs of views are implemented? I did not find anything useful in the source code that solution, so please advise. Thank you!

Hi @Realvincentyuan, @Shekar - you may find my recent component-based solution useful in this case.

1 Like