Multiple tabs in streamlit

[JayC]

Community update: Streamlit released native support for tabs! See st.tabs

Hi,

I am new to this - please bear with me if I have gravely missed something.

One feature I would love to see is multiple tabs so the app can host multiple windows. Is it available? I looked through the online documents as well as the community site, but could not find it.

Thanks!
-jc

[Marc]

Not at the moment. What you can do for now is to use radiobuttons like in the image below

There are some feature requests related to this like

Feature request: Tabs

Please add st.navigation widget

It would be awesome if you casted a vote or added some comments in the issues on what you need.

[JayC]

thanks @Marc. I upvoted both requests.

[Marc]

But @JayC. There is actually a hack (?) via Bokeh that I just discovered. See Bokeh can provide layouts, tabs, advanced tables and JS Callbacks.

[benlindsay]

There’s another potential hack while we’re waiting for Streamlit-native tabs if you don’t need the power of Bokeh. You can make use of query args and Bootstrap tabs rendered via st.markdown(). Here’s a little demo inside the issue requesting tabs in streamlit: Feature request: Tabs · Issue #233 · streamlit/streamlit · GitHub

And here’s what that can look like:

[user2002]

Hi @benlindsay

thanks for share this code , i use it in my app.
I have a question,when i want to use each page in separate python file and then use all of this file in one file as main.py.
But i can’t do this in this way, can you help me more about this?

[benlindsay]

Yeah, you can handle this with standard module importing logic. Here’s an example modified from my original example:

import streamlit as st

from pages import home, about, contact

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":
    home.write()
elif active_tab == "About":
    about.write()
elif active_tab == "Contact":
    contact.write()
else:
    st.error("Something has gone terribly wrong.")

For this to work, you’d need to make a “pages” folder with a home.py, about.py, and contact.py file, and each of those files should have a “write” function that does that handles logic for that page. Hope that helps!

[BeyondMyself]

@benlindsay
Thanks for your solution, it is a new break.
Can we use the css file locally , change the background color when tab is hover or clicked?
It seems it not work with other bootstrap version like newest 5.0.2

[benlindsay]

You can include a local css file in a hacky way as shown in this post. I haven’t tried tinkering with CSS other than including bootstrap, so I’m not sure what the limitations are or what will clash with streamlit’s built-in CSS, but go ahead and tinker away!

[honan]

Hi @benlindsay - love this hack to get tabs working. I’ve been using this in my app and it works fine when hosted locally however doesn’t work when the app is deployed. Encountering 404 page not found. Do you have a workaround for this?

[benlindsay]

I haven’t tried streamlit sharing yet so I’m not sure why that doesn’t work. I’ll have to try it out soon

[BeyondMyself]

can you visit the url in deploy environment about https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css

[BugzTheBunny]

If it’s still relevant, i’ve made something of that sort, which also works faster then using the normal navigation.

But it uses flask (or you can indeed use it with anything else).

Streamlit Navbar

While we are waiting for an official navbar, I’ve created a simple app to show how can you create a navbar by yourself. To be more specific, a way to embed streamlit app, inside an HTML page, and navigate inside the app using a bootstrap navbar. Ideally, i would wrap it with flask. Demo: [snapshot] Code:

[honan]

No worries

[honan]

okay I will check it out, thx

[benlindsay]

Just took a look at it and the way streamlit sharing urls work, going to a link with an href of “/” doesn’t take you to the current page like it does when running streamlit locally. You’ll need to do something like

STREAMLIT_URL = os.getenv(“STREAMLIT_URL”, “/”)

and make all your tab hrefs look like f"{STREAMLIT_URL}?foo=bar"

then set STREAMLIT_URL as a secret in your streamlit management page. I’ll try to set up a streamlit sharing tabs demo some time

[flunardelli]

Hey, I would like to contribute to that discussion about tabs. While a completely understand all your dev reasons to not implement tabs right now, I and other community members, probably think it’s a great feature to have, mostly to create more organized apps for final users.

I have tried that approach using experimental_get_query_parameters, but my session cache was invalidated on each tab interaction (aka, losing previously checked options).
So I looked for a more simple approach, and voilá, tabs using a radio component as a base for interactions.
UPDATE: I just realize that approach will “override” any radio component.
I looked at some CSS solutions for that but, since we don’t have any reference to that component on HTML code, I couldn’t find a way to isolate it.
Hey dev almighties, would be great to have “key=‘name’” at some point in the HTML code of the component.

def tabs(default_tabs = [], default_active_tab=0):
        if not default_tabs:
            return None
        active_tab = st.radio("", default_tabs, index=default_active_tab, key='tabs')
        child = default_tabs.index(active_tab)+1
        st.markdown("""  
            <style type="text/css">
            div[role=radiogroup] > label > div:first-of-type, .stRadio > label {
               display: none;               
            }
            div[role=radiogroup] {
                flex-direction: unset
            }
            div[role=radiogroup] label {             
                border: 1px solid #999;
                background: #EEE;
                padding: 4px 12px;
                border-radius: 4px 4px 0 0;
                position: relative;
                top: 1px;
                }
            div[role=radiogroup] label:nth-child(""" + str(child) + """) {    
                background: #FFF !important;
                border-bottom: 1px solid transparent;
            }            
            </style>
        """,unsafe_allow_html=True)        
        return active_tab

active_tab = tabs(["Tab 1", "Tab 2", "Tab 3"])
st.write(active_tab)

[BeyondMyself]

@flunardelli

def tabs(default_tabs = [], default_active_tab=0):
        if not default_tabs:
            return None
        active_tab = st.radio("", default_tabs, index=default_active_tab)
        child = default_tabs.index(active_tab)+1
        st.markdown("""  
            <style type="text/css">
            div[role=radiogroup] > label > div:first-of-type {
               display: none
            }
            div[role=radiogroup] {
                flex-direction: unset
            }
            div[role=radiogroup] label {             
                border: 1px solid #999;
                background: #EEE;
                padding: 4px 12px;
                border-radius: 4px 4px 0 0;
                position: relative;
                top: 1px;
                }
            div[role=radiogroup] label:nth-child(""" + str(child) + """) {    
                background: #FFF !important;
                border-bottom: 1px solid transparent;
            }            
            </style>
        """,unsafe_allow_html=True)        
        return active_tab

active_tab = tabs(["Tab 1", "Tab 2", "Tab 3"])
st.write(active_tab)

Great, it is unbelievable you can did this without bootrap.css.

[wgong27514]

Thank you @flunardelli , I have used your tab-solution to display different contents

def _tabs(tabs_data = {}, default_active_tab=0):
        tab_titles = list(tabs_data.keys())
        if not tab_titles:
            return None
        active_tab = st.radio("", tab_titles, index=default_active_tab)
        child = tab_titles.index(active_tab)+1
        st.markdown("""  
            <style type="text/css">
            div[role=radiogroup] > label > div:first-of-type {
               display: none
            }
            div[role=radiogroup] {
                flex-direction: unset
            }
            div[role=radiogroup] label {             
                border: 1px solid #999;
                background: #EEE;
                padding: 4px 12px;
                border-radius: 4px 4px 0 0;
                position: relative;
                top: 1px;
                }
            div[role=radiogroup] label:nth-child(""" + str(child) + """) {    
                background: #FFF !important;
                border-bottom: 1px solid transparent;
            }            
            </style>
        """,unsafe_allow_html=True)        
        return tabs_data[active_tab]

def _show_video():
    st.title("Russia – Ukraine conflict / crisis Explained")
    st.video("https://www.youtube.com/watch?v=h2P9AmGcMdM")

def _fake_df():
    N = 50
    rand = pd.DataFrame()
    rand['a'] = np.arange(N)
    rand['b'] = np.random.rand(N)
    rand['c'] = np.random.rand(N)    
    return rand

def do_tabs():
    st.markdown("Tab example found at [Multiple tabs in streamlit](https://discuss.streamlit.io/t/multiple-tabs-in-streamlit/1100/19?u=wgong27514)")
    tab_content = _tabs({
            "Tab html": "<h2> Hello Streamlit, <br/> what a cool tool! </h2>",
            "Tab video": _show_video, 
            "Tab df": _fake_df()
        })
    if callable(tab_content):
        tab_content()
    elif type(tab_content) == str:
        st.markdown(tab_content, unsafe_allow_html=True)
    else:
        st.write(tab_content)