Is there a method for navigating to a particular anchor within the webapp?

🎈 Using Streamlit
1

Is there any Streamlit method for navigating to a particular anchor within the webapp.

If a title has an anchor for example is there any way to get the page to navigate to that particular section?

2

Hi @jamestaylor,
Anchors are automatically added to header text.
For example, if you define a header text using:
st.header("Section 1")
Then you can create a link to this header using:
st.markdown("[Section 1](#section-1)", unsafe_allow_html=True)

I’ve also created a demo app showing this in action (https://share.streamlit.io/dataprofessor/streamlit/main/anchor_app.py)

And the corresponding code on GitHub is available here (streamlit/anchor_app.py at main · dataprofessor/streamlit · GitHub)

Hope this helps :slight_smile:

1 Like
3

Hi @dataprofessor,

Thank you for the reply!

Is there a way to make the page navigate to that link programmatically without having the user click on the link?

1 Like
4

Hi @jamestaylor,

A programmatic way of having users navigate to various sections on the app can indeed be performed using various widgets such as st.buttons or st.selectbox but these require users to click on these widgets to select which anchors to navigate to.

I’ve actually created a video (see link below) on adding a custom top navigation bar that you can modify and use anchor links instead of external URLs as I’ve done in the video.

Links:

5

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