Side by Side clicks to switch between pages

Using Streamlit
2

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