Using Streamlit tabs

There is a second way to organize your Streamlit app layout that is remarkably similar to the Streamlit column, called the tab. Tabs are useful when you have content that is too wide to break up into columns, even in wide mode, and also are useful when you want to focus attention by only showing one piece of content at a time. For example, if we had three very distinct graphs that only looked good in wide mode, but we didn’t want to put them vertically on top of each other, we could use tabs to selectively show them. Let’s explore exactly how this works!

st.tabs works very similarly to st.columns, but instead of telling Streamlit the number of tabs we want, we instead pass along the names of the tabs and then use now-familiar with statements to place content into the tab. The next bit of code turns the columns from our most recent Streamlit app into tabs:

import pandas as pd
import streamlit as st
 
st.set_page_config(layout="wide")
st.title("SF Trees")
st.write(
    """
    This app analyses trees in San Francisco using
    a dataset kindly provided by SF DPW.
    """
)
trees_df = pd.read_csv("trees.csv")
df_dbh_grouped = pd.DataFrame(trees_df.groupby(["dbh"]).count()["tree_id"])
df_dbh_grouped.columns = ["tree_count"]
tab1, tab2, tab3 = st.tabs(["Line Chart", "Bar Chart", "Area Chart"])
with tab1:
    st.line_chart(df_dbh_grouped)
with tab2:
    st.bar_chart(df_dbh_grouped)
with tab3:
    st.area_chart(df_dbh_grouped)

From this, we will get the following app:

Figure 6.7: First tabs

And that’s all there is to tabs! Tabs don’t have the gap parameter that columns do (because, well, what would a gap be for tabs?), but aside from this, we can map all the information we learned about columns onto our knowledge of tabs. Now, on to the Streamlit sidebar.