Streamlit sidebar logo

Custom Components streamlit-webrtc
1

Hi
I want to add the logo of my organization which is stored in a variable. I want to place it at the top of the sidebar and the multi page menu at the bottom. Please can someone help.

Thank You

image
image412×929 13.4 KB

2

Hi @akshat , perhaps this might help - Streamlit (extras.streamlit.app)

pip install streamlit-extras
from streamlit_extras.app_logo import add_logo

3

Hi @AvratanuBiswas
I have the logo I can display that. But I want the order to be as :

  1. Logo
  2. Multi Page options
  3. Button
  4. Filters

If you could tell any method which would help me to achieve this, would be helpful
Thank You

4

Try this code, this will slove your problem!

streamlit-1
streamlit-1482×669 37.8 KB

import streamlit as st

logo_url = ‘./image_url’
st.sidebar.image(logo_url)
user_menu = st.sidebar.radio(
‘Select an Option’,
(‘Page 1’,‘Page 2’,‘Page 3’,‘Page 4’)
)

if user_menu == ‘Page 1’:
pass
#your page content, filters etc
“”“But if you want to show filters on sidebar for particular page use st.sidebar and then your filter”“”
selected_year = st.sidebar.selectbox(“Select Year”,years) #years is list of years

if user_menu == ‘Page 2’:
pass
#your page content, filters etc

1 Like
5

You can just add more items in the sidebar like this

import streamlit as st
from streamlit_extras.app_logo import add_logo

# add kitten logo
add_logo("https://placekitten.com/100/100")

# add sidebar buttons
st.sidebar.button("Button")
st.sidebar.button("Button 2")

# add sidebar filters
st.sidebar.slider("Slider", 0, 100, 50)
st.sidebar.date_input("Date Input")
6

is there a way i can manage the size of this ?

7

@akshat Inject custom CSS with st.markdown():

st.markdown("""<style> your css </style>""" , unsafe_allow_html=True)
Use your browser’s inspect element console for Streamlit classes names (right click > inspect element), you can try and fiddle with it on the browser first then once satisfied write the new css in your code and run it.

1 Like
8

I can’t find the appropriate class for it. It just messes up the dimensions for some logos. Can you please help?

9

@akshat

Using st.image()

You can simply use st.image():

with st.sidebar:
  st.image("https://www.pixenli.com/image/fm0aEpMI", width=150)

Using st.markdown()

If you want to use the st.markdown() instead:

  • Add your image inside your sidebar:
with st.sidebar:
  st.markdown("![](https://www.pixenli.com/image/fm0aEpMI)", unsafe_allow_html=True)
  • Deploy app locally or on cloud
  • Use “inspect element” of your browser (right click on the image > inspect element)
  • Copy the class name(s): if it doesn’t have a class name beside the img tag, take the class name of the div that nests the img tag.
  • Use the tag elment img or the nested class name you coppied (e.g: .divclassname img)
  • Use injected css:
st.markdown("""
<style>
   .divclassname img {
        width: 150px;
        height: auto;
    }
</style>
""", unsafe_allow_html=True)

In case of doubt

  • Right-click the image on the page > Inspect element
  • Right-click the element on the code in the browser code inspector
  • choose: Copy > CSS Selector
  • Use the CSS Selector instead of a class name in your injected CSS

NOTE:

  • The class name of image element when using st.image("", width=) and st.markdown("![]()", unsafe_allow_html=True) are different, Streamlit will autogenerate the class names and structure when deploying.
  • If you copy the CSS Selector, realize that it changes is if you create new elements in your app around the previous element (you add more text input above or after the image, more images… etc, because it tries to be as precise as it can at the current structure of the code)
1 Like