How to Create Streamlit App With Multiple Tabs Natively (with examples)

Sharing is caring!

Last Updated on July 14, 2022 by Jay

We can now create multiple tabs in streamlit natively with the release of version 1.10.0 without the need for other third-party libraries!

Streamlit is a super awesome library for making web-based user interfaces (UI) and it’s also very easy to use. The library is quite popular; therefore, people have created plug-ins for adding tabs to streamlit apps. Most of these plug-ins require importing additional libraries and declaring/setting up the tabs via code. Now streamlit supports creating tabs natively and it’s almost effortless.

Library

If you are not yet using streamlit, or you are already using an older version. Type the following in the command prompt to get the latest (v 1.10.0 as of writing) streamlit:

pip install streamlit --upgrade

Streamlit Multiple Tabs Setup

Unlike other third-party streamlit plug-ins, the native way of creating tabs in streamlit actually doesn’t require additional code. Quite interesting if you ask me!

To create multiple tabs inside the same streamlit app, all we need is the following special folder structure:

project_folder
|—home_page.py
|—pages
|—|—tab1.py
|—|—tab2.py
|—|—tab3.py

In other words, we just need to create a “pages” folder inside our main project_folder, then put all the individual scripts for tabs inside the “pages” folder. That’s it!

It doesn’t matter what we name the project_folder, home_page.py file, or each of the scripts inside the pages folder. As long as the pages folder exists, streamlit knows to list each script inside as an individual tab.

A Simple Multipage App (Example)

Let’s create an app called “A bunch of calculators” which contains three calculators, each on its own page.

First, we’ll set up a home page. I’ll call it main.py – just 2 lines of code below.

import streamlit as st
st.markdown("A bunch of calculators")

Second, we’ll create a folder called pages, and save three files inside: temp_calc.py, length_calc.py, and bmi_calc.py. To clarify, we will not write full code for each calculator, we only create those pages to show how the multipage app setup works.

temp_calc.py

import streamlit as st

st.sidebar.markdown("Temperature calculator")

st.markdown("Temperature calculator")
temp_var = st.number_input('enter celcius')
st.write(f'fahrenheit is: {temp_var*9/5+32}F')

length_calc.py

import streamlit as st

st.sidebar.markdown("Length calculator")

st.markdown("Length calculator")

bmi_calc.py

import streamlit as st

st.sidebar.markdown("BMI calculator")

st.markdown("BMI calculator")
st.write('your BMI is 9999')

The above setup should give us a bare minimum to work with. Let’s make our app more interesting.

Tab Order

By default, the tabs are ordered alphabetically based on the scripts (inside pages folder) names and then displayed on the home page sidebar.

We can change the order by adding a number prefix in front of each script name. Now the numbers will determine the order of the tabs on the page. Streamlit knows that the number prefixes are used for ordering purposes; therefore, it doesn’t display them on the page.

As you also see below, we can include emojis inside script names to make the tabs look more attractive.

Page Titles

This is more for SEO and aesthetic purposes, many people probably don’t care about what the page title says.

We can actually customize the page title for each page (tab) by including st.set_page_config(page_title=’…’) inside each script:

st.set_page_config(page_title = "temperature calculator")

Session_state Works Like A Charm

Sometimes our multipage app might need to use the same variable across different pages. We can use st.session_state to store such variables.

Let’s mimic a “login” feature on our simple app. On the main page, we’ll create a text input field that takes a user name. Once we enter that user name, it should appear on all tabs within this app until we refresh the page.

Below is what the updated scripts look like. I’m going to enter my name inside the input field and press the button “update user”. Then switch between different pages and we should see the greeting message “hello Jay” appear on all pages.

main.py

import streamlit as st


st.markdown("A bunch of calculators????")


user = st.text_input('enter your name')
update = st.button('update user')

if 'user' not in st.session_state:
    st.session_state['user'] = user

if update:
    st.session_state['user'] = user

    
st.sidebar.write(f"hello {st.session_state['user']}")

st.write(st.session_state)

01_????️_temp_calc.py

import streamlit as st


st.set_page_config(page_title = "temperature calculator")
st.markdown("Temperature calculator")
st.sidebar.markdown("Temperature calculator")
st.sidebar.write(f"hello {st.session_state['user']}")

temp_var = st.number_input('enter celcius')

st.write(f'fahrenheit is: {temp_var*9/5+32}F')
st.write(st.session_state)

02_????_length_calc.py

import streamlit as st

st.set_page_config(page_title = "length calculator")
st.sidebar.markdown("Length calculator")
st.sidebar.write(f"hello {st.session_state['user']}")


st.markdown("Length calculator")

03_????_bmi_calc.py

import streamlit as st

st.set_page_config(page_title = "BMI calculator")
st.sidebar.markdown("BMI calculator")
st.sidebar.write(f"hello {st.session_state['user']}")

st.markdown("BMI calculator")
st.write('your BMI is 9999')

Additional Resources

How to Make Streamlit Multiple Callback

How to Use Streamlit Session State