Navigating through pages with custom html elements

Hey everyone, first post here hoping to get some help. I am creating a fairly complex (for Streamlit) app, which include authentication through a custom google oAuth component I found, as well as multiple pages, custom html elements, and various community created components. The relevant ones here are the authentication component I mentioned before, along with the switch page element from the streamlit extras component. The switch_page one is working great as it allows navigation through buttons without resetting the session state. The problem I am running into is that I have custom html cards via st.markdown like the below:

        body = f"""
        <a class='card-button' href={link} target='_self'>
            <img src={img} alt={title} height='20'>
            <div>
                <h4>{title}</h4>
                <p>{desc}</p>
            </div>
        </a>
        """
        st.markdown(body, True)

These are functioning, but clicking the card follows a link, https://localhost:8501/page for example, but it resets the session state. I’m hoping to find a way to call the switch_page function when the card is clicked instead or something similar. Has anyone tried anything similar and found a workaround? I have played around with a cookies component which works fine locally but starts acting out with authentication when I put it on a server. Thanks in advance!

Does this help?

How did you manage to use html nav and save the session state!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.