Summary
I have a multipage app with three tabs - A, B, and C. Lets say within page B I have three tabs X, Y, and Z. I want to bring user to URL/B/Y through the URL. How to do it?
Using “URL/B” the user can directly land on page B. But how to add more parameter to URL to bring user to a custom tab?
1 Like
You could use st.experimental_get_query_params to trigger certain changes on the page layout. For example, if a ?tab=Z
is passed to the address, a click on that tab can be triggered to automatically show the contents of that tab.

import streamlit as st
"# Page A"
list_of_tabs = ["X", "Y", "Z"]
tabs = st.tabs(list_of_tabs)
with tabs[0]:
"## Section X"
"Some repeated text " * 100
with tabs[1]:
"## Section Y"
"Some repeated text " * 100
with tabs[2]:
"## Section Z"
"Some repeated text " * 100
# Handling query parameters
query = st.experimental_get_query_params()
try:
## Look-up the tab from the query
index_tab = list_of_tabs.index(query["tab"][0])
## Click on that tab
js = f"""
<script>
var tab = window.parent.document.getElementById('tabs-bui2-tab-{index_tab}');
tab.click();
</script>
"""
st.components.v1.html(js)
except ValueError:
## Do nothing if the query parameter does not correspond to any of the tabs
pass
3 Likes
This is fantastic @edsaac
The only change I had to make was in the id of the tab element, It may not be same for different user’s browsers. So I went to inspect element and then found the right element for me.
Without that the code wouldn’t work.
Thank you so much for the help!!
1 Like
This worked perfectly for me - thanks so much!
# Define the list of tabs
list_of_tabs = ["Feed", "Settings", "Files", "Convert", "Dashboard"]
# Create the tabs
tabs = st.tabs(list_of_tabs)
# Handling query parameters
query = st.experimental_get_query_params()
try:
# Look-up the tab from the query
if "tab" in query:
tab_name = query["tab"][0]
if tab_name in list_of_tabs:
index_tab = list_of_tabs.index(tab_name)
# Click on the tab using JavaScript (you may need to change the 'tabs-bui1-tab-' tag)
js = f"""
<script>
var tab = window.parent.document.getElementById('tabs-bui1-tab-{index_tab}');
tab.click();
</script>
"""
st.components.v1.html(js)
except ValueError:
# Do nothing if the query parameter does not correspond to any of the tabs or if "tab" is not present in the query
pass
with tabs[0]:
st.markdown("Feed")
with tabs[1]:
st.markdown("Settings")
with tabs[2]:
st.markdown("Files")
Then you can link directly to the tab on the streamlit page using the additional url parameter - eg
/?tab=Settings