Layouts and Containers

Complex layouts

Streamlit provides several options for controlling how different elements are laid out on the screen.

Columns

Insert containers laid out as side-by-side columns.

col1, col2 = st.columns(2)
col1.write("this is column 1")
col2.write("this is column 2")

Container

Insert a multi-element container.

c = st.container()
st.write("This will show last")
c.write("This will show first")
c.write("This will show second")

Empty

Insert a single-element container.

c = st.empty()
st.write("This will show last")
c.write("This will be replaced")
c.write("This will show first")

Expander

Insert a multi-element container that can be expanded/collapsed.

with st.expander("Open to see more"):
  st.write("This is more content")

Popover

Insert a multi-element popover container that can be opened/closed.

with st.popover("Settings"):
  st.checkbox("Show completed")

Sidebar

Display items in a sidebar.

st.sidebar.write("This lives in the sidebar")
st.sidebar.button("Click me!")

Tabs

Insert containers separated into tabs.

tab1, tab2 = st.tabs(["Tab 1", "Tab2"])
tab1.write("this is tab 1")
tab2.write("this is tab 2")

Third-party components

Streamlit Elements

Create a draggable and resizable dashboard in Streamlit. Created by @okls.

from streamlit_elements import elements, mui, html

with elements("new_element"):
  mui.Typography("Hello world")

Pydantic

Auto-generate Streamlit UI from Pydantic Models and Dataclasses. Created by @lukasmasuch.

import streamlit_pydantic as sp

sp.pydantic_form(key="my_form",
  model=ExampleModel)

Streamlit Pages

An experimental version of Streamlit Multi-Page Apps. Created by @blackary.

from st_pages import Page, show_pages, add_page_title

show_pages([ Page("streamlit_app.py", "Home", "🏠"),
  Page("other_pages/page2.py", "Page 2", ":books:"), ])

Previous: Media elements Next: st.columns

forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.