How to add external links/url to common window of multi-page app

🎈 Using Streamlit
1

Hi,

I am trying to add some external links (ex: company website, LinkedIn page, link to a support documentation) for my multi-pages app which should look like the following:

image
image275×785 50.7 KB

Can someone let me know how I can add such external links (marked in the red shape), which are not in any pages but will be visible whenever the application is open.

Best,
Debayan

2

Hey @DebayanPaul93,

You could use some st.columns and HTML to insert those images, see this playground: https://playground.streamlit.app?q=social-links-down-sidebar

Code:

st.sidebar.write("# Title")
st.sidebar.write("""
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
""")

columns = st.sidebar.columns(6)

with columns[1]:
    st.write("""<div style="width:100%;text-align:center;"><a href="https://streamlit.io" style="float:center"><img src="http://www.doigtdecole.com/wp-content/uploads/2020/03/logo-rond-twitter.png" width="22px"></img></a></div>""", unsafe_allow_html=True)
    
with columns[2]:
    st.write("""<div style="width:100%;text-align:center;"><a href="https://streamlit.io" style="float:center"><img src="http://www.doigtdecole.com/wp-content/uploads/2020/03/logo-rond-twitter.png" width="22px"></img></a></div>""", unsafe_allow_html=True)
    
with columns[3]:
    st.write("""<div style="width:100%;text-align:center;"><a href="https://streamlit.io" style="float:center"><img src="http://www.doigtdecole.com/wp-content/uploads/2020/03/logo-rond-twitter.png" width="22px"></img></a></div>""", unsafe_allow_html=True)

Output:

image
image1086×862 70.9 KB

3

Hi @arnaud ,

Thanks for your reply. I just have two follow-up questions:

a) Do I need to write the code on every pages? I am using this to make multiple pages (main page is named Home and the rest pages are in a pages subfolder inside the app folder).

b) How could I insert just blank lines without inserting the texts in your code so my external links/icons appears at very bottom of the window?

4

Hey @DebayanPaul93,

For a), yes you would need to have that on all pages. For b) there’s no native option, but you can check out the add_vertical_space extra here or play with HTML/CSS!

Best,
Arnaud