Multiple Tabs Are Now Part of Streamlit | by Ahmed Besbes | Jul, 2022

A new widget to better structure the layout of your apps

As a data scientist, I use Streamlit a lot to build interactive web applications and showcase demos and prototypes.

Streamlit is extremely easy to use, it has a very intuitive syntax and gets you up to speed for prototyping, in no time. You don’t need to know HTML or JavaScript now to build great web apps.

Streamlit provides a neat API to craft and design interactive apps in Python.

This API is constantly evolving with the help of a vibrant community and that’s why we’ll explore today one functionality that’s been recently added to it.

This post is a quick review of this new feature. It includes code samples, an overview of the syntax, and outlines some use-cases that could benefit from adding tabs.

Let’s have a look 🔍

Starting from version 1.11.0 , Streamlit introduces st.tabs; a new component to insert multiple containers into separate tabs.

As always, the syntax is pretty straightforward ⭐️.

You first create the tabs by passing a list of options to the st.tabs function.

Each option corresponds to a tab’s name.

Now, to add content to each tab, you have two options.

1 — Using a context manager on each tab via the with statement

2 — Calling each tab’s methods directly.

I personally prefer the first method as it makes the code cleaner and easier to read. Using a context manager helps to quickly identify the content of each tab.

You can add everything you want inside a tab.

→ Metrics

→ One plot

→ Multiple plots

→ A mixture of plots and Altair charts (or plotly, bokeh, and matplotlib charts too)

→ Input widgets (select boxes, input text, sliders, etc.)

Tabs are basically holders for anything you want to create in Streamlit.
They provide easy navigation between groups of related content.

In terms of UX, I found the transition between tabs fast and smooth.

st.tabs allows you also to dynamically create tabs and insert content into them.

Here’s an example that creates an arbitrary number of tabs.

The idea of using tabs is to group related content in independent views.

Here’s where I’d use them:

• Summarizing a machine learning experiment into multiple tabs that contain metrics (on train and test), interactive plots, raw data, and predictions in a dataframe format
• Visualizing a workflow: for example, all the transformations that your data undergoes at every stage of a pipeline. For example, a topic extraction app
• An in-depth exploratory data analysis: something similar to what pandas-profiling produces, but with results spread over multiple tabs

I love Streamlit and what the community behind relentlessly produces.

Tabs and certainly a lot of upcoming features will bring more capabilities to this great library, allowing people to build useful applications with a better user experience.

If you’re new to Streamlit and its ecosystem you can have a look at some of my previous posts:

Or check the following links:

That’s it for today. Until next time! 👋

A new widget to better structure the layout of your apps

As a data scientist, I use Streamlit a lot to build interactive web applications and showcase demos and prototypes.

Streamlit is extremely easy to use, it has a very intuitive syntax and gets you up to speed for prototyping, in no time. You don’t need to know HTML or JavaScript now to build great web apps.

Streamlit provides a neat API to craft and design interactive apps in Python.

This API is constantly evolving with the help of a vibrant community and that’s why we’ll explore today one functionality that’s been recently added to it.

This post is a quick review of this new feature. It includes code samples, an overview of the syntax, and outlines some use-cases that could benefit from adding tabs.

Let’s have a look 🔍

Starting from version 1.11.0 , Streamlit introduces st.tabs; a new component to insert multiple containers into separate tabs.

As always, the syntax is pretty straightforward ⭐️.

You first create the tabs by passing a list of options to the st.tabs function.

Each option corresponds to a tab’s name.

Now, to add content to each tab, you have two options.

1 — Using a context manager on each tab via the with statement

2 — Calling each tab’s methods directly.

I personally prefer the first method as it makes the code cleaner and easier to read. Using a context manager helps to quickly identify the content of each tab.

You can add everything you want inside a tab.

→ Metrics

→ One plot

→ Multiple plots

→ A mixture of plots and Altair charts (or plotly, bokeh, and matplotlib charts too)

→ Input widgets (select boxes, input text, sliders, etc.)

Tabs are basically holders for anything you want to create in Streamlit.
They provide easy navigation between groups of related content.

In terms of UX, I found the transition between tabs fast and smooth.

st.tabs allows you also to dynamically create tabs and insert content into them.

Here’s an example that creates an arbitrary number of tabs.

The idea of using tabs is to group related content in independent views.

Here’s where I’d use them:

• Summarizing a machine learning experiment into multiple tabs that contain metrics (on train and test), interactive plots, raw data, and predictions in a dataframe format
• Visualizing a workflow: for example, all the transformations that your data undergoes at every stage of a pipeline. For example, a topic extraction app
• An in-depth exploratory data analysis: something similar to what pandas-profiling produces, but with results spread over multiple tabs

I love Streamlit and what the community behind relentlessly produces.

Tabs and certainly a lot of upcoming features will bring more capabilities to this great library, allowing people to build useful applications with a better user experience.

If you’re new to Streamlit and its ecosystem you can have a look at some of my previous posts:

Or check the following links:

That’s it for today. Until next time! 👋