Multiple Page App Side Bar Icon and Background in Streamlit

Question

Is there any way to use the icons which ı select for the sidebar in multiple page app. I want to make a sidebar like the below image:
Is there any way to change the background image of sidebar?

Asked By: murat taşçı

||

Source

Answer 1

you can use <img src="path/to/pngimage.png"/> and use PNG images to get the result

Answered By: Rakesh Gombi

Answer 2

You should rename the pages starting with a number, the icon and then the page name. Streamlit will automatically take care of the numbers and the _ by removing them leaving only the icon and the page name. Pages are sorted based on the numbers.

Your page should return only>>> Mapping Demo

# How to name page:

1_ _Mapping_Demo.py

Answered By: Jamiu Shaibu

Answer 3

For second question:

st.markdown('<style>div[class="css-zbg2rx e1fqkh3o1"] {color:black; background: url("url adress");background-repeat: no-repeat;background-size:350%;} </style>', unsafe_allow_html=True)

Answered By: murat taşçı

Answer 4

Disclaimer: I suggest to keep it simple and use Jamiu Shaibu’s answer, BUT if you don’t want to / can’t change your scripts file names:

You can use this hacky solution at the top of your main file.

Asumming your main script file name is main.py:

workdir/
   + main.py
   + mapping_demo.py
   + ploting_demo.py

# main.py
pages = st.source_util.get_pages('main.py')
new_page_names = {
  'mapping_demo': '  Mapping Demo',
  'ploting_demo': '  Ploting demo',
}

for key, page in pages.items():
  if page['page_name'] in new_page_names:
    page['page_name'] = new_page_names[page['page_name']]

Answered By: Mordor1110

Multiple Page App Side Bar Icon and Background in Streamlit

Question:

Answers: