How to get selected tab name

🎈 Using Streamlit
1

Is there any way to get the selected tab of st.tab?

3

Hi @imClumsyPanda,

Thanks for posting!

Unfortunately there isn’t a built-in way to do this currently, but this would be a great feature enhancement request – feel free to submit one here.

Caroline :balloon:

1 Like
5

There is this TabBar component from GitHub - Mohamed-512/Extra-Streamlit-Components: An all in one place, to find complex or just not available components by default on streamlit. which can be used to update a regular st.container in order to emulate a tab. It’s not the best documented source code :crying_cat_face: but the TabBar example seems to work fine with version 1.12 :smiley_cat:

A demo:
notreallytabs

The code:

import streamlit as st
import extra_streamlit_components as stx

st.code("import extra_streamlit_components as stx")
chosen_id = stx.tab_bar(data=[
    stx.TabBarItemData(id="tab1", title="✍️ To Do", description="Tasks to take care of"),
    stx.TabBarItemData(id="tab2", title="📣 Done", description="Tasks taken care of"),
    stx.TabBarItemData(id="tab3", title="💔 Overdue", description="Tasks missed out")])

placeholder = st.container()

if chosen_id == "tab1":
    placeholder.markdown(f"## Welcome to `{chosen_id}`")
    placeholder.image("https://placekitten.com/g/1400/600",caption=f"Meowhy from {chosen_id}")

elif chosen_id == "tab2":
    placeholder.markdown(f"## Hello, this is `{chosen_id}`")
    placeholder.image("https://placekitten.com/g/1200/300",caption=f"Hi from {chosen_id}")

elif chosen_id == "tab3":
    placeholder.markdown(f"## And this is ... 🥁 ... `{chosen_id}`")
    placeholder.image("https://placekitten.com/g/900/400",caption=f"Fancy seeing you here at {chosen_id}")

else:
    placeholder = st.empty()
5 Likes
6

Thank you, Edwin! That helps a lot!

7

Yes, definitely this is what I am was looking for!

8

Is there a way to change the css of the tabs?