Removing the right dropdown or editing the link

Custom Components
1

Hi,

I am delivering an app to a third-party partner who has no idea about Streamlit and they keep getting confused with the right dropdown as shown below.

image
image446×894 44.9 KB

Is there a way I could edit the dropdown links or remove them altogether. I would want to link the documentation to my own documentation and remove the “ask a question” and “report a bug” option.

Thanks!

2

Hello @prakharrathi25

The easier way is to remove everything with the CSS hack (if you need to search the forum for more topics on this):

How does it work?

You build a CSS selector that selects the div tag with the stToolbar attribute in your app (you can find it by browsing the devtools component of your browser, then you apply a display: none rule to it. Then you pass it through st.markdown(..., unsafe_allow_html=True) to interpret HTML/CSS globally in the app

import streamlit as st

st.markdown("""
<style>div[data-testid="stToolbar"] { display: none;}</style>
""", unsafe_allow_html=True)

st.button("Hello world")

Then I’d rather put a link to the documentation as a st.caption in the sidebar :slight_smile: editing the dropdown links is probably possible using the same trick but…kind of a hassle as you need to thinker with more HTML/CSS that could change between Streamlit versions.

Hope this helps,
Fanilo

1 Like
3

This is a pretty neat trick. It’s not what I was looking for exactly but it will work for now. Thanks!