Create Dynamic Tabs in Streamlit: Quickly Get Started

Name

Olaf Källström

Published on 7/24/2023

(opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab)

Streamlit is a popular open-source Python library that allows developers to create interactive web applications quickly and easily. It's particularly favored by data scientists for its simplicity and efficiency in building data-driven applications. One of the key features that Streamlit offers is the ability to create tabs, which are essential for structuring the layout of your applications and improving user navigation.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly. Check out this amazing video produced by Sven from Coding is Fun (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!

Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!

Additionally, you can also check out PyGWalker GitHub Page (opens in a new tab) for more PyGWalker examples.

Part 1. What are Streamlit Tabs?

Tabs in Streamlit are containers that can hold any content you want to create in your application. They provide an easy way to navigate between groups of related content, making your application more organized and user-friendly. For instance, you can use tabs to separate different sections of your machine learning experiment, such as data visualization, model training, and results analysis.

Part 2. Why Use Tabs in Streamlit?

The primary purpose of using tabs in Streamlit is to group related content in independent views. This not only enhances the user experience by providing a clean and organized interface but also allows for a more efficient workflow. For example, in a machine learning project, you can have separate tabs for data preprocessing, model training, evaluation metrics, and predictions.

Part 3. How to Create Tabs in Streamlit

To create tabs in Streamlit, you first need to create a list of tab titles. Each option in this list corresponds to a tab's name. Then, for each tab, you write the content that you want to display. Here's a simple example:

import streamlit as st
 
st.title('My Application')
 
# Create tabs
tab_titles = ['Topic A', 'Topic B', 'Topic C']
tab1, tab2, tab3 = st.tabs(tab_titles)
 
# Add content to each tab
with tab1:
    st.header('Topic A')
    st.write('Topic A content')
 
with tab2:
    st.header('Topic B')
    st.write('Topic B content')
 
with tab3:
    st.header('Topic C')
    st.write('Topic C content')

In this example, we have created three tabs titled 'Topic A', 'Topic B', and 'Topic C'. Each tab displays a header and some text.

Part 4. Creating Multiple Tabs in Streamlit

Creating multiple tabs in Streamlit follows the same process as creating a single tab. You simply add more options to the list of tab titles, and then add content for each tab. This is particularly useful when you have a lot of related content that you want to group into separate sections.

For instance, let's say you're building a Streamlit application for a machine learning project. You might have separate sections for data preprocessing, model training, model evaluation, and results visualization. Each of these sections can be grouped into its own tab, making your application more organized and easier to navigate.

Here's an example of how to create multiple tabs in Streamlit:

import streamlit as st
 
st.title('My Machine Learning Project')
 
# Create tabs
tab_titles = ['Data Preprocessing', 'Model Training', 'Model Evaluation', 'Results Visualization']
tabs = st.tabs(tab_titles)
 
# Add content to the Data Preprocessing tab
with tabs[0]:
    st.header('Data Preprocessing')
    st.write('This is where you can preprocess your data.')
 
# Add content to the Model Training tab
with tabs[1]:
    st.header('Model Training')
    st.write('This is where you can train your model.')
 
# Add content to the Model Evaluation tab
with tabs[2]:
    st.header('Model Evaluation')
    st.write('This is where you can evaluate your model.')
 
# Add content to the Results Visualization tab
with tabs[3]:
    st.header('Results Visualization')
    st.write('This is where you can visualize your results.')

In this example, we have created four tabs for a machine learning project. Each tab corresponds to a different section of the project, and each tab contains its own content.

You can add as many tabs as you need, and each tab can contain any type of content, such as text, images, plots, and widgets. This makes Streamlit tabs a versatile tool for creating interactive and dynamic applications.

Creating multiple tabs in Streamlit is a simple and effective way to enhance the functionality and user experience of your applications. So, start exploring this feature and see how it can benefit your projects.

Part 5. Creating Dynamic Tabs in Streamlit

Dynamic tabs in Streamlit are tabs that are created and rendered dynamically based on content from a server or API. This is advantageous when the number of tabs and their content are not known in advance and can change over time. Here's an example of how to create dynamic tabs in Streamlit:

import streamlit as st
 
st.title('My Application')
 
# Function to get tab content from server
def get_tab_content():
    return [
        {'title': 'Topic A', 'content': 'Topic A content'},
        {'title': 'Topic B', 'content': 'Topic B content'},
        {'title': 'Topic C', 'content': 'Topic C content'},
    ]
 
# Pull tab content from server
tab_contents = get_tab_content()
 
# Create tabs
tab_names = [content['title'] for content in tab_contents]
tabs = st.tabs(tab_names)
 
# Iterate through each tab and build content
for tab, tab_content in zip(tabs, tab_contents):
    with tab:
        st.header(tab_content['title'])
        st.write(tab_content['content'])

In this example, we first define a function get_tab_content that mimics what a server or API might return. This function returns a list of dictionaries, each containing a tab title and tab content. We then create the tabs and iterate through them to write the content.

Par 6. Practical Examples of Streamlit Tabs

Streamlit tabs are a versatile feature that can be leveraged in a myriad of applications, especially in the realm of data science and machine learning. Here's a deep dive into some of the practical uses of Streamlit tabs:

Streamlit Tabs for Machine Learning Experiments

Imagine you're knee-deep in a machine learning experiment. You've got data preprocessing, model training, model evaluation, and results visualization, all happening concurrently. It's a whirlwind of stages and processes that could easily become overwhelming. But here's where Streamlit tabs come to the rescue. By grouping each stage into separate tabs, you're not only making it easier for users to navigate through the experiment but also enhancing their understanding of the entire process.

For example, you might have a Streamlit application with tabs like this:

import streamlit as st
 
st.title('My Machine Learning Experiment')
 
# Create tabs
tab_titles = ['Data Preprocessing', 'Model Training', 'Model Evaluation', 'Results Visualization']
tabs = st.tabs(tab_titles)
 
# Add content to each tab
with tabs[0]:
    st.header('Data Preprocessing')
    st.write('Here we preprocess the data...')
 
with tabs[1]:
    st.header('Model Training')
    st.write('Here we train the model...')
 
with tabs[2]:
    st.header('Model Evaluation')
    st.write('Here we evaluate the model...')
 
with tabs[3]:
    st.header('Results Visualization')
    st.write('Here we visualize the results...')

In this example, each stage of the machine learning experiment has its own dedicated tab, making the application more organized and user-friendly.

Streamlit Tabs for Data Visualization

Data visualization is the heart and soul of data analysis and machine learning. It's the art of painting a picture with your data, and Streamlit tabs are the perfect canvas for this masterpiece. With Streamlit tabs, you can create separate tabs for different types of visualizations, such as bar charts, scatter plots, and heatmaps. This allows users to effortlessly switch between different visualizations and gain insights from the data.

Here's an example of how you might use Streamlit tabs for data visualization:

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
# Load some data
data = pd.read_csv('data.csv')
 
st.title('My Data Visualization Application')
 
# Create tabs
tab_titles = ['Bar Chart', 'Scatter Plot', 'Heatmap']
tabs = st.tabs(tab_titles)
 
# Add content to each tab
with tabs[0]:
    st.header('Bar Chart')
    st.bar_chart(data)
 
with tabs[1]:
    st.header('Scatter Plot')
    fig, ax = plt.subplots()
    ax.scatter(data['x'], data['y'])
    st.pyplot(fig)
 
with tabs[2]:
    st.header('Heatmap')
    st.heatmap(data.corr())

In this example, each tab displays a different type of data visualization, allowing users to explore the data from different perspectives.

Streamlit Tabs for Dashboard Creation

Streamlit tabs can be used to create interactive dashboards. For instance, you can have a tab for user inputs, another tab for displaying the data, and another tab for showing the results of data analysis. This makes the dashboard more organized and user-friendly.

Here's an example of a Streamlit dashboard with tabs:

import streamlit as st
 
st.title('My Dashboard')
 
# Create tabs
tab_titles = ['User Inputs', 'Data Display', 'Data Analysis']
tabs = st.tabs(tab_titles)
 
# Add content to each tab
with tabs[0]:
    st.header('User Inputs')
    st.text_input('Enter some text')
    st.number_input('Enter a number')
 
with tabs[1]:
    st.header('Data Display')
    st.table({'column1': [1, 2, 3], 'column2': [4, 5, 6]})
 
with tabs[2]:
    st.header('Data Analysis')
    st.line_chart([1, 2, 3, 4, 5])

In this example, the 'User Inputs' tab contains input widgets, the 'Data Display' tab shows a table of data, and the 'Data Analysis' tab displays a line chart.

Streamlit Tabs for Project Organization

In a large project with multiple components, Streamlit tabs can be used to organize the components into separate sections. This not only makes the project more manageable but also improves the user experience by providing a clean and organized interface.

For instance, if you're building a large application with multiple components such as data loading, data cleaning, data analysis, and data visualization, you could organize these components into separate tabs like this:

import streamlit as st
 
st.title('My Large Project')
 
# Create tabs
tab_titles = ['Data Loading', 'Data Cleaning', 'Data Analysis', 'Data Visualization']
tabs = st.tabs(tab_titles)
 
# Add content to each tab
with tabs[0]:
    st.header('Data Loading')
    st.write('Here we load the data...')
 
with tabs[1]:
    st.header('Data Cleaning')
    st.write('Here we clean the data...')
 
with tabs[2]:
    st.header('Data Analysis')
    st.write('Here we analyze the data...')
 
with tabs[3]:
    st.header('Data Visualization')
    st.write('Here we visualize the data...')

In this example, each component of the project has its own dedicated tab, making the application more organized and easier to navigate.

Part 7. Advanced Concepts in Streamlit Tabs

Streamlit tabs offer a range of advanced features that can enhance the functionality and user experience of your applications. Here are some advanced concepts in Streamlit tabs:

Streamlit Tab Container and Its Uses

A Streamlit tab container is a container that holds the content of a tab. You can add any content to a tab container, such as text, images, plots, and widgets. The tab container provides an easy way to group related content and improve user navigation.

For instance, you might have a Streamlit application with a tab container like this:

import streamlit as st
 
st.title('My Application')
 
# Create a tab container
tabs = st.tabs(['Tab 1', 'Tab 2', 'Tab 3'])
 
# Add content to the first tab
with tabs[0]:
    st.header('Tab 1')
    st.write('This is the content of Tab 1.')
 
# Add content to the second tab
with tabs[1]:
    st.header('Tab 2')
    st.write('This is the content of Tab 2.')
 
# Add content to the third tab
with tabs[2]:
    st.header('Tab 3')
    st.write('This is the content of Tab 3.')

In this example, each tab is a container that holds its own content, and users can switch between tabs to view different content.

Streamlit Tabbed Layout and Design

Streamlit provides a neat API to craft and design interactive apps in Python. The tabbed layout is one of the design features offered by Streamlit. With a tabbed layout, you can organize your content into separate tabs, making your application more organized and user-friendly.

Here's an example of a Streamlit application with a tabbed layout:

import streamlit as st
 
st.title('My Application')
 
# Create a tabbed layout
tabs = st.tabs(['Tab 1', 'Tab 2', 'Tab 3'])
 
# Add content to the first tab
with tabs[0]:
    st.header('Tab 1')
    st.write('This is the content of Tab 1.')
 
# Add content to the second tab
with tabs[1]:
    st.header('Tab 2')
    st.write('This is the content of Tab 2.')
 
# Add content to the third tab
with tabs[2]:
    st.header('Tab 3')
    st.write('This is the content of Tab 3.')

In this example, the application has a tabbed layout with three tabs, and each tab contains its own content.

Streamlit Tabbed Navigation and User Interface

Streamlit tabs provide easy navigation between groups of related content. The transition between tabs is fast and smooth, providing a great user experience. Moreover, you can dynamically create tabs and insert content into them, which is particularly useful when the number of tabs and their content are not known in advance.

For example, you might have a Streamlit application where the number of tabs and their content are determined by user input:

import streamlit as st
 
st.title('My Dynamic Application')
 
# Get the number of tabs from the user
num_tabs = st.number_input('Enter the number of tabs', min_value=1, max_value=10, value=3)
 
# Create tabs
tab_titles = [f'Tab {i+1}' for i in range(num_tabs)]
tabs = st.tabs(tab_titles)
 
# Add content to each tab
for i in range(num_tabs):
    with tabs[i]:
        st.header(f'Tab {i+1}')
        st.write(f'This is the content of Tab {i+1}.')

In this example, the user can specify the number of tabs, and the application dynamically creates the tabs and adds content to them.

Streamlit Tabbed Content and Display

Streamlit tabs are basically holders for anything you want to create in your application. They provide a way to display a variety of content, such as metrics, plots, charts, and input widgets. This makes Streamlit tabs a versatile tool for creating interactive and dynamic applications.

Here's an example of a Streamlit application that uses tabs to display different types of content:

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
# Load some data
data = pd.read_csv('data.csv')
 
st.title('My Data Visualization Application')
 
# Create tabs
tab_titles = ['Metrics', 'Plot', 'Chart', 'Input']
tabs = st.tabs(tab_titles)
 
# Add content to each tab
with tabs[0]:
    st.header('Metrics')
    st.metric('Metric 1', 123)
    st.metric('Metric 2', 456)
 
with tabs[1]:
    st.header('Plot')
    fig, ax = plt.subplots()
    ax.plot(data['x'], data['y'])
    st.pyplot(fig)
 
with tabs[2]:
    st.header('Chart')
    st.line_chart(data)
 
with tabs[3]:
    st.header('Input')
    st.text_input('Enter some text')
    st.number_input('Enter a number')

In this example, the 'Metrics' tab displays metrics, the 'Plot' tab shows a plot, the 'Chart' tab displays a line chart, and the 'Input' tab contains input widgets.

Conclusion

Streamlit tabs are a powerful feature that can greatly enhance the functionality and user experience of your applications. Whether you're working on a data science project, creating a dashboard, or building a complex application, Streamlit tabs can help you organize your content and make your application more user-friendly. So, start exploring Streamlit tabs today and see how they can benefit your projects.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly.

(opens in a new tab)

Frequently Asked Questions

Does Streamlit support tabs?

Yes, Streamlit supports tabs. You can create multiple tabs in your Streamlit application to organize your content and improve user navigation.

How do you position elements in Streamlit?

In Streamlit, you position elements by writing them in the order you want them to appear. Streamlit runs from top to bottom, so the order in which you write your elements is the order in which they will appear in your application.

How does Streamlit work?

Streamlit works by turning Python scripts into interactive web applications. It provides a set of high-level APIs for creating interactive elements, such as sliders, checkboxes, and tabs. When you run your Streamlit script, it spins up a web server and opens a browser window pointing to the server.

What is the work of Streamlit in Python?

Streamlit is a Python library for creating interactive web applications. It allows Python developers and data scientists to create applications for data analysis, machine learning, and data visualization without needing to know HTML, CSS, or JavaScript.