Top-level links from a component iframe?

🧩 Custom Components
8

This is hacky, but I’ve grabbed the links from “the real navigation” in order to simulate them getting clicked via a triggered event elsewhere.

In this example, there are three pages ‘a’, ‘b’, and ‘c’

import streamlit as st

js = '''
<script>
    function goTo(page) {
        page_links = parent.document.querySelectorAll('[data-testid="stSidebarNav"] ul li a')
        page_links.forEach((link) => {
            if (link.text == page) {
                link.click()
            }
        })
    }
</script>

<button onclick="goTo('a')">Go to page a</button><br />
<button onclick="goTo('b')">Go to page b</button><br />
<button onclick="goTo('c')">Go to page c</button><br />
'''

st.components.v1.html(js)
1 Like