Using Tabs in Streamlit

Adding Tabs in Streamlit

Streamlit’s tabs provide a way to organize content into separate views within your application. The st.tabs() function creates a container for tab content, making it easy to switch between different sections.

Basic Tabs Example

Create simple tabs with different content:

import streamlit as st

tab1, tab2, tab3 = st.tabs(["Tab 1", "Tab 2", "Tab 3"])

with tab1:
    st.header("Tab 1")
    st.write("This is the content of tab 1")

with tab2:
    st.header("Tab 2")
    st.write("This is the content of tab 2")

with tab3:
    st.header("Tab 3")
    st.write("This is the content of tab 3")

Tabs with Data Analysis

Using tabs to organize different data visualizations:

import streamlit as st
import pandas as pd
import plotly.express as px

df = pd.DataFrame({
    'sales': [100, 150, 200, 250],
    'month': ['Jan', 'Feb', 'Mar', 'Apr']
})

# Create tabs
tab1, tab2 = st.tabs(["Chart", "Data"])

# Tab content
with tab1:
    st.header("Sales Chart")
    fig = px.line(df, x='month', y='sales')
    st.plotly_chart(fig)

with tab2:
    st.header("Raw Data")
    st.dataframe(df)

You can also add tabs to the sidebar for additional organization:

import streamlit as st

with st.sidebar:
    tab1, tab2 = st.tabs(["Filters", "Settings"])
    
    with tab1:
        st.selectbox("Select Department", ["Sales", "Marketing"])
        st.date_input("Select Date")
    
    with tab2:
        st.checkbox("Dark Mode")
        st.slider("Update Frequency", 1, 60, 5)

# Main content
st.title("Main Content Area")

Dynamic Tabs

Create tabs dynamically based on data:

import streamlit as st
import pandas as pd

df = pd.DataFrame({
    'department': ['Sales', 'Marketing', 'Engineering'],
    'revenue': [100, 200, 300]
})

# Create tabs dynamically
tabs = st.tabs(df['department'].tolist())

# Fill each tab with content
for i, tab in enumerate(tabs):
    with tab:
        dept = df['department'].iloc[i]
        rev = df['revenue'].iloc[i]
        st.header(f"{dept} Dashboard")
        st.metric("Revenue", f"${rev}k")

Using Tabs in Evidence

Evidence provides the Tabs component for organizing content, with additional features like URL persistence and styling options.

Basic Example

<Tabs>
<Tab label="Sales Data">
This tab shows sales information.

```sql sales
select 
    sum(sales) as total_sales, 
    category
from orders
group by category
```

<Value data={sales} />
</Tab>
<Tab label="Marketing Data">
This tab contains marketing metrics.

```sql marketing
select 
    channel, 
    count(*) as count 
from orders
group by channel
```

<DataTable data={marketing} />
</Tab>
</Tabs>

Tabs with URL Persistence

Create shareable tabs that maintain their state in the URL:

<Tabs id="analysis-tab">
<Tab label="Revenue">

```sql revenue
select sum(sales) as total_revenue 
from orders
```
<Value data={revenue} />
</Tab>
<Tab label="Customers">

```sql customers
select count(distinct id) as total_customers 
from orders
```

<Value data={customers} />
</Tab>
</Tabs>

Tabs from SQL Query

```sql categories
select 
    category, 
    count(*) as count
from orders
group by category
```

<Tabs>
{#each categories as category}
    
<Tab label={category.category}>

There are {category.count} items in the {category.category} category.

</Tab>

{/each}
</Tabs>

Streamlit Tabs vs. Evidence Tabs

Feature	Streamlit Tabs	Evidence Tabs
URL Persistence	✖️	✔️
Dynamic Creation	✔️	✖️
Sidebar Integration	✔️	(Layout)
Custom Styling	(Limited)	✔️
Full Width Option	✖️	✔️
Background Color	✖️	✔️

While Streamlit’s tabs are great for dynamic Python applications, Evidence’s Tabs component provides more built-in styling options and URL persistence for data reporting.

For more tab options, explore the Evidence Tabs documentation.

Get Started with Evidence