Buttons alternative to radio buttons for multi-page app

Haven’t seen this here yet so I just thought I’d leave this code here. Multi-page apps can be accomplished using the radio button approach because they save their state between re-runs. Somehow that was unsatisfying (to me!) so an alternative is to have navigation buttons up the top, i.e. Next Page or Previous Page. (Nav buttons down the bottom won’t work because the same page will re-load before registering the button push, meaning you need to reload twice to register the new page).

I know the developers are doing lots of work at the moment and looking for feedback, so my vote goes towards allowing buttons to sit side-by-side to improve the ‘UX’ in this approach.
cheers!

it looks something like this:

import SessionState
import streamlit as st
import io

st.beta_set_page_config(
    page_icon=":shark:",
    layout="wide",

)

def pageZero(sesh):
    st.title('This is page zero! welcome')
    st.write('some text for zeroth page. Welcome to the app. Follow the nav buttons above to move forward and backwards one page')

def pageOne(sesh):
    st.title('page ONE')
    st.write('one')

def pageTwo(sesh):
    st.title('TWO')
    st.write('two')

sesh = SessionState.get(curr_page = 0)
PAGES = [pageZero, pageOne, pageTwo]

def main():
    ####SIDEBAR STUFF
    st.sidebar.title("this is an app:")

    st.sidebar.markdown('Might be easier to import the pageOne/pageTwo/pageThree from a separate file to make the code cleaner')

    #####MAIN PAGE NAV BAR:
    st.markdown(' ### Navigation')
    st.markdown('Click Next to go to the next page')
    if st.button('Back:'):
        sesh.curr_page = max(0, sesh.curr_page-1)
    if st.button('Next page:'):
        sesh.curr_page = min(len(PAGES)-1, sesh.curr_page+1)
    st.markdown('----------------------------------')


    #####MAIN PAGE APP:
    st.write('PAGE NUMBER:', sesh.curr_page)
    page_turning_function = PAGES[sesh.curr_page]
    st.write(sesh.curr_page)
    page_turning_function(sesh)

if __name__=='__main__':
    main()
2 Likes

Being able to create columns rather than only top-down is currently in development, and should be out in the coming weeks.

Thanks for sharing this tutorial!