1 Layout Components Explained

Key Concepts

• st.sidebar: A sidebar for additional controls or information.
• st.columns: Create columns to organize content.
• st.expander: Expandable sections to hide or show content.
• st.container: A container to group and style content.

st.sidebar

st.sidebar is used to create a sidebar in your Streamlit application. This sidebar can be used to place additional controls, information, or navigation elements that are not part of the main content area.

import streamlit as st

st.sidebar.title("Sidebar Title")
st.sidebar.write("This is a sidebar content.")
    

st.columns

st.columns allows you to create columns in your Streamlit application. This is useful for organizing content side by side, making it easier to compare or display related information.

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    st.write("Column 1 content")

with col2:
    st.write("Column 2 content")
    

st.expander

st.expander is used to create expandable sections in your Streamlit application. This allows you to hide or show content based on user interaction, making your app more interactive and less cluttered.

import streamlit as st

with st.expander("Click to expand"):
    st.write("This content is hidden by default.")
    

st.container

st.container is used to create a container in your Streamlit application. This container can be used to group and style content, making it easier to manage and organize your app's layout.

import streamlit as st

container = st.container()
container.write("This content is inside a container.")
    

Examples

Example 1: Using st.sidebar

import streamlit as st

st.title("Main Content")
st.sidebar.title("Sidebar")
st.sidebar.write("This is a sidebar content.")
    

Example 2: Using st.columns

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    st.write("Column 1")

with col2:
    st.write("Column 2")

with col3:
    st.write("Column 3")
    

Example 3: Using st.expander

import streamlit as st

st.title("Expandable Content")

with st.expander("Click to expand"):
    st.write("This content is hidden by default.")
    

Example 4: Using st.container

import streamlit as st

st.title("Container Example")

container = st.container()
container.write("This content is inside a container.")
    

Analogies

Think of st.sidebar as a drawer in a desk where you keep additional tools or documents. The st.columns are like shelves in a library where books are organized side by side. The st.expander is like a folder that you can open and close to reveal or hide its contents. The st.container is like a box where you can group and store related items.

By mastering these layout components, you can create well-organized and interactive Streamlit applications that are easy to navigate and understand.