Streamlit sidebar
Streamlit sidebar
Sidebars are a great way to add navigation and settings to your Streamlit app.
Elements can be passed to the sidebar.
Need a Streamlit developer: Click Here
Introduction
A sidebar is a collapsible panel on the left side of the Streamlit app.
It is used for navigation, filters and settings.
The sidebar can be created using the st.sidebar module.
st.sidebar is similar to st, but it renders elements inside the sidebar.
The side bar is also collapsible, meaning it can be hidden or shown by the user.
This is useful for creating a cleaner interface, especially for apps with many controls or settings.
The sidebar can contain any Streamlit element, such as text, buttons, sliders, and more.
It is a great way to organize your app and make it more user-friendly.
The following two snippets are equivalent i.e they do the same thing:
Object notation
st.sidebar.[element_name]
“with” notation
with st.sidebar:
st.[element_name]
import streamlit as st
st.title("Streamlit Slider Example")
st.sidebar.title("Side bar Menu")
st.sidebar.write("This is a sidebar menu.")
Sidebar Widgets
we can add various widgets to the sidebar, such as sliders, checkboxes, and select boxes.
Selectbox
options = ["Ferrari", "Lamborghini", "Porsche", "Tesla"]
selected_options = st.sidebar.selectbox("Select a car:", options)
st.sidebar.write("You selected:", selected_options)
Slider
values = st.sidebar.slider("Select a range of values", 0, 100, (25, 75))
st.write("Selected range:", values)
Checkbox
agree = st.sidebar.checkbox("I agree to the terms and conditions")
if agree:
st.write("You agreed to the terms and conditions.")
Radio Buttons
choice = st.sidebar.radio("Choose an option:", ["Option 1", "Option 2", "Option 3"])
st.write("You selected:", choice)
Text Input
name = st.sidebar.text_input("Enter your name:")
st.write("Hello,", name)
Organizing the Sidebar Layout
Grouping related widgets together can make the sidebar more organized and user-friendly.
st.sidebar.header("Settings")
st.sidebar.subheader("Data Options")
datasets = st.sidebar.selectbox(
"Select a dataset:",
["Dataset 1", "Dataset 2", "Dataset 3"]
)
st.sidebar.subheader("Visualization Options")
chart_type = st.sidebar.radio(
"Select chart type:",
["Line Chart", "Bar Chart", "Pie Chart"]
)
st.sidebar.subheader("User Preferences")
show_legend = st.sidebar.checkbox("Show Legend", value=True)
theme = st.sidebar.selectbox("Select Theme:", ["Light", "Dark"])
st.write("Selected Dataset:", datasets)
st.write("Selected Chart Type:", chart_type)
st.write("Show Legend:", show_legend)
st.write("Selected Theme:", theme)
Expander in Sidebar
with st.sidebar.expander("Advanced Settings", expanded=False):
option1 = st.checkbox("Enable Option 1")
option2 = st.checkbox("Enable Option 2")
Sidebar for Navigation
page = st.sidebar.radio(
"Navigation",
("Home", "About", "Contact")
)
if page == "Home":
st.title("Home Page")
st.write("Welcome to the home page!")
elif page == "About":
st.title("About Page")
st.write("This is the about page.")
else:
st.title("Contact Page")
st.write("This is the contact page.")
Styling the Sidebar
st.markdown("""
<style>
[data-testid="stSidebar"] {
background-color: #f0f0f5;
padding: 20px;
border-right: 2px solid #ccc;
color: #333;
}
</style>
""", unsafe_allow_html=True)
st.sidebar.title("Styled Sidebar")
st.sidebar.write("This sidebar has custom styling.")
