Feature request: Tabs

Problem

Sorry if this has been discussed before (couldn’t find anything here on on the forum). While building my app, I thought it could be nice to have a tabbed UI component, e.g. to show different “views” of the data (visualisation, table view, JSON, more detailed docs etc.) If the user clicks a tab, that content is generated – otherwise it’s not.

Solution

API could maybe look something like this? Specifying the group name could be optional (default is the same group).

with streamlit.tab("Tab one", "tabgroup1"):
    st.write("This is tab content and only run if user selects the tab")
with streamlit.tab("Tab two", "tabgroup1"):
    st.write("This is tab content and only run if user selects the tab")

Additional context

Probably clear, but better to be explicit. By “tabs”, I mean something like this:

[benlindsay]

So I finally got around to trying the markdown + bootstrap + query parameters hack that was in my head and it sorta works. You’ll lose all widget values because each tab link would refresh the whole page I think, so if you want to preserve variables you’d probably have to have all of them stored as a query parameter instead of just the tab values. Here’s code that works for me on streamlit==0.80.0 and a little demo on my old, slow, computer:

import streamlit as st

st.markdown(
    '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">',
    unsafe_allow_html=True,
)
query_params = st.experimental_get_query_params()
tabs = ["Home", "About", "Contact"]
if "tab" in query_params:
    active_tab = query_params["tab"][0]
else:
    active_tab = "Home"

if active_tab not in tabs:
    st.experimental_set_query_params(tab="Home")
    active_tab = "Home"

li_items = "".join(
    f"""
    <li class="nav-item">
        <a class="nav-link{' active' if t==active_tab else ''}" href="/?tab={t}">{t}</a>
    </li>
    """
    for t in tabs
)
tabs_html = f"""
    <ul class="nav nav-tabs">
    {li_items}
    </ul>
"""

st.markdown(tabs_html, unsafe_allow_html=True)
st.markdown("<br>", unsafe_allow_html=True)

if active_tab == "Home":
    st.write("Welcome to my lovely page!")
    st.write("Feel free to play with this ephemeral slider!")
    st.slider(
        "Does this get preserved? You bet it doesn't!",
        min_value=0,
        max_value=100,
        value=50,
    )
elif active_tab == "About":
    st.write("This page was created as a hacky demo of tabs")
elif active_tab == "Contact":
    st.write("If you'd like to contact me, then please don't.")
else:
    st.error("Something has gone terribly wrong.")

A more streamlit-native approach to tabs that treats tab selection as just another widget value to remember would be much more ideal, but this is a potential interim solution, especially if you don’t need to preserve widget values between tabs.

[MarcSkovMadsen]

And @ines

I really like the api you are proposing. I have requested something similar for the app and grid layout here.

https://github.com/streamlit/streamlit/issues/486#issuecomment-548666166