How do i hide/ remove the menu in production?

Using Streamlit
21

It’s a real shame there is no support for removing the hamburger icon completely in production. I’ve got a navbar working, but when moving between pages or loading/reloading the hamburger menu can be seen beneath.

I would love to see support for fully removing this in production! it would make the apps much more professional looking.

1 Like
22

Hi @mikful :wave:

You can add the query param /?embed=true to the end of the app URL to remove the hamburger menu. E.g.:

4 Likes
23

Woah finally! Thanks a lot @snehankekre :slight_smile:
After almost 3 years of Streamlitting, this is the closest I’ve come to a streamlit --serve kind of solution. Have never deployed a Streamlit app because of the hamburger menu giving quite some options to any visitor of the app.

It’s a bit weird that it has to be added to the query params but it’s leagues better than the not really secure suggestion we have in the knowledge base: How do I hide the hamburger menu from my app? - Streamlit Docs
Since people can still use the browser’s dev tools to remove the visibility hidden CSS and get access to the hamburger menu anyway.

Is the team considering adding embed=true as a possible configuration option in either the .toml or as an argument to the set_page_config() function?
I believe the hamburger menu discussion has been open since early 2019 so I’m really hoping for a configurable solution soon :innocent:

2 Likes
24

Ah I’ve noticed a big drawback when using /?embed=true: a scrollbar is never added to the page.
So when one has a few items on the page, some of it is off-screen and unreachable.

So for small apps with 3 widgets this might work fine but a big form with lots of inputs still needs a different solution.

I really hope the team can come up with a solution soon :sweat_smile:

25

Hey @Fhireman , I faced the same issue but in my case i wasn’t able to scroll at all, I found a work around for this , i did the following -

enable_scroll = """
<style>
.main {
    overflow: auto;
}
</style>
"""

st.markdown(enable_scroll, unsafe_allow_html=True)

So using this along with ?embed=true seemed to be the solution , but another drawback of this is that the part which shows ‘Connecting’ or ‘Running’ is also hidden.

1 Like
26

thanks for the solution

27

Here’s a solution that doesnt have to mess with the url! Just realized it already existed thru another existing component

streamlit-navigation-bar

Here’s the sample code!

styles = {
        "nav": {
            "background-color": "white",
            "display": "flex",
            
            "height": ".01rem"
        },
    }
    options = {
        'show_menu': False
    }
    pages = ['Home']
    page = st_navbar(pages,
                     styles=styles,
                     options=options
                     )

The code above minimizes the height, changes the background color to white (if that’s the background color) and executes the show_menu option as documented below.

image
image686×575 26.5 KB

1 Like