Customizing Sidebar in Streamlit

Adding a Sidebar in Streamlit

Streamlit’s sidebar provides a container for navigation controls and input widgets. The st.sidebar command creates a collapsible sidebar that remains visible while users interact with the main content.

Basic Sidebar Example

A simple sidebar with various input widgets.

import streamlit as st

# Add widgets to sidebar
st.sidebar.title('Navigation')
selected_page = st.sidebar.radio(
    'Go to',
    ['Home', 'Data Analysis', 'About']
)

# Add filters to sidebar
st.sidebar.header('Filters')
department = st.sidebar.selectbox(
    'Select Department',
    ['Sales', 'Marketing', 'Engineering']
)
date_range = st.sidebar.date_input('Select Date Range')

# Main content area
st.title(f'Page: {selected_page}')
st.write(f'Department: {department}')

Customizing Sidebar Width

While Streamlit doesn’t provide direct control over sidebar width, you can use custom CSS to modify it:

import streamlit as st

# Custom CSS to modify sidebar width
st.markdown(
    """
    <style>
    [data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
        width: 350px;
    }
    [data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
        width: 350px;
        margin-left: -350px;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Sidebar content
st.sidebar.title('Wide Sidebar')
st.sidebar.write('This sidebar is 350px wide')

Hiding the Sidebar

There are two main approaches to hide the Streamlit sidebar:

1. Using query parameters:

import streamlit as st

# Hide sidebar using query parameters
# Access with ?embedded=true
if "embedded" in st.query_params:
    st.markdown(
        """
        <style>
        [data-testid="stSidebar"] {display: none}
        </style>
        """,
        unsafe_allow_html=True
    )

st.title('Main Content')

2. Using CSS permanently:

import streamlit as st

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

st.title('App without Sidebar')

Customizing Layout in Evidence

Evidence provides layout customization through the layout system. This allows you to control the sidebar visibility and other layout elements directly.

Hiding Sidebar in Evidence

Create a custom layout by adding a +layout.svelte file:

<EvidenceDefaultLayout {data} hideSidebar=true>
    <slot slot="content" />
</EvidenceDefaultLayout>

Full Width Layout

Remove sidebar and expand content to full width:

<EvidenceDefaultLayout 
    {data} 
    hideSidebar=true 
    fullWidth=true
>
    <slot slot="content" />
</EvidenceDefaultLayout>

Streamlit Sidebar vs. Evidence Layout

Feature	Streamlit Sidebar	Evidence Layout
Built-in Width Control	✖️	✔️
Hide/Show Toggle	✔️	✔️
Custom Navigation	✔️	✔️
Full Width Option	(Manual)	✔️
Responsive Design	✔️	✔️
Custom Styling	(CSS Required)	✔️

Evidence generally provides much more flexibility for layout customization, and a simpler interface for controlling the sidebar - so can write many fewer lines of code to achieve the same results.

For more layout options, explore the Evidence layout documentation.