How to bring the user to a specific tab within a page in my multipage app using the URL?

🎈 Using Streamlit
1

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
2

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.

change_tab_query_param

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
3

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
4

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