Is there a way to collapse a st.sidebar?

Using Streamlit
1

Is there a way to collapse st.sidebar?

I tried using something like this to hide the content:

def hide_sidebar_content():
    st.session_state["hide_sidebar"] = True

def show_sidebar_content():
    st.session_state["hide_sidebar"] = False

But I don’t really like this approach because the sidebar’s arrow to open it is gone, and I end up needing to add another custom button to toggle it.

Is there an official or better way to collapse/expand the sidebar dynamically while keeping the default toggle arrow?

2

The preferred method is st.set_page_config. (The user can still override, but you can set the initial state.)

3

In my case i want to use this to hide the side bar when the user try to print the page, when start the streamlit i need it visible.

4

What were you trying to do with your Python functions in the original post that you couldn’t replace with st.set_page_config? You can conditionally set the parameters of st.set_page_config. (Run the app expanded and when whatever happens that you’re trying to close it, run it as collapsed.) Can you provide more information about how you’re triggering this change?

5

I have a Streamlit app that generates production reports. It has a sidebar for navigation that needs to start expanded by default.
These reports are printed on paper, so what I’d like is: when the user tries to print, the sidebar should automatically collapse, to make sure it isn’t printed.

The original code I tried actually hides the sidebar completely, instead of just collapsing it — and the arrow to expand it back also disappears from the screen.

I’m looking for a way to justcollapse the sidebar and keep the toggle arrow.

6

How are you triggering your current method, precisely? Can you provide a snippet of a page of Lorem ipsum and how you implement your current print-hide?

7

I’m making a llm chat bot app with login. In the login page I “hide” the side_bar with html tags:

st.markdown("""
    <style>
        section[data-testid="stSidebar"][aria-expanded="true"]{
            display: none;
        }
    </style>
""", unsafe_allow_html=True)

You could call it into a function before you are about to print

8

So you haven’t connected it in any way to the print action itself? (You can just replace st.markdown with st.set_page_config…)

9

I was using that, maybe until streamlit 1.38 or something, and it collapsed automatically (it gave a very annoying error the first time the page was deployed or maybe the container loaded, saying that the first function had to be that one)
Anyways I updated streamlit to 1.51 (I also moved the set_page_config to the top of each script, just below importing streamlit), and now there is no first-load annoying error, but the lateral bar won’t collapse. It is crazy because I can set the title of each pge with set_page_config, but the status collapsed or expanded is completely ignored

Example:

import streamlit as st
st.set_page_config(page_title="Page Title", page_icon="icon", layout="wide", initial_sidebar_state="collapsed", menu_items=None)

and for whatever reason, even if the documentation says I can call set_page_config as much as I want in a script, it gives the error I mentioned above, that it needs to be called only once and the very first one. i was told by ChatGPT that I have to change to the new navigation settings, but I do not want to define the subpages in the lateral bar for the homepage, in the homepage the lateral bar will only hold an image, i want to define what is going in the lateral bars per sub-page, which is what i do now, but I do not know why now with the updates it is impossible to tell it to collapse on loading a new page, seems like a design error.

10

The set_page_config() option only works for the first time but it does not collapse the sidebar once its expanded and user wants to collapse it on some action.

I also got into this issue where I had to collapse a sidebar which has form submit button. Following code change worked for me:

import streamlit.components.v1 as components

def run_js_on_rerun(js_code):

components.html(f"<script>{js_code}</script>", height=0)

def hide_sidebar():

run_js_on_rerun("""

                var btn = window.parent.document.querySelector('.stSidebar button\[kind="headerNoPadding"\]')

                if (typeof btn != 'undefined' && btn) {

                     btn.click();

                    }

                """)

You can call hide_sidebar() function anywhere and it will hide the sidebar instantly by using concept of element locator.