Create clickable button to navigate to different sections like in state-of-llm-apps

🎈 Using Streamlit
, , ,
1

I really like the page layout and navigations in state-of-llm-apps. However, it is not available on GitHub to learn how it was created. I tried many different ways but cannot make it to work.

Can someone help me out here? Suppose I have 3 sections in my page, I’d like to have buttons, 'Next" and/or “Previous” to go to different sections, how can I do that?
how to program an image as a button in streamlit?

Also, is it doable to have a button to go to another standalone page in pages folder, like a multi-page application?

2

Hi @HPuX

I’ve built the State of LLM app and the navigation bar used was based on a custom HTML/CSS that navigates internally on the same page by using heading anchors that are created from H1, H2, H3 headings.

Such headings can be created via st.header() and st.subheader() or from st.markdown() when using Markdown syntax of # for H1, ## for H2, etc.

Next, I used an HTML code for the link along with custom CSS code to stylized the link (along with hover effects as well).

<a href=“#-name-of-heading”>Name of Link</a>

However, this app was built in October-November and ever since the newer Streamlit version released the st.switch_page() method which makes it possible to navigate to any pages of your multi-page app, you can use it to create Next/Previous buttons as well.

Hope this helps!

3

HI @dataprofessor

Thank you for your reply.!

I was able to find some guidance on using markdown for the anchor navigation. It’s good to know that st.header(), st.subheader allows to define custom anchor. It is also good to know the switch_page() function. I’m using streamlit extras for this currently.

Can you share how did you make the image button clickable for navigation?

Another challenge I’m facing is with st.container(). I know by design, when using height attr, it will add a border. But that border is really ugly and i want to hide it. If this is not possible with st.container(), what other layout container we can use with height definition?

Thanks!

1 Like