okld
September 25, 2020, 11:45pm
2
Hello @ExpwithMl , welcome to the forum!
You could try to use parts of my table of content widgets I’ve shared awhile ago. The idea is to use st.markdown with the allow_unsafe_html argument to manually craft anchors in the page.
Alright, here’s an example. You can place your TOC in the sidebar or on the main page, anywhere you want. The only requirement is to use toc’s title(), header() and subheader() methods to create your titles. Call toc.generate() once you have displayed every title, at the very end of your app.
And just in case, make sure you don’t use user inputs to create your titles. I’m using unsafe_allow_html, so if the end user can change titles somehow by anything he wants, he’d be able to execute code on…
That said, it seems there is an official implementation being worked out:
streamlit:develop ← wtype:add-heading-anchors
opened 06:11AM - 13 Aug 20 UTC
# Heading Anchors Initial Draft (#824)
@nthmost
Updated this from the previ… ous draft. I at least wanted to get a working draft before checking in.
This is a thin solution to adding anchors to heading elements: st.title, st.header, st.subheader, st.write(md). Need to work with Streamlit's ecosystem correctly and add a robust solution for st.write.
## Current setup
```python
st.title('this is a title')
st.title('this is a title', 'this is its anchor text')
```
**Renders**
```html
<a href="#this-is-a-title">
<h1 id="this-is-a-title">this is a title</h1>
</a>
<a href="#this-is-its-anchor-text">
<h1 id="this-is-its-anchor-text">this is a title</h1>
</a>
```
2 Likes