Skip to content

Commit 0fcf67c

Browse files
sfc-gh-jriekejriekecursoragent
authored
Document st.bottom in API reference and cheat sheet (#1473)
* Document st.bottom in API reference, menu, and cheat sheet. Add Bottom RefCard with screenshot on layout and main API index pages, menu entry, cheat sheet example, and layout API page. Excludes streamlit.json docstring updates. Co-authored-by: Cursor <cursoragent@cursor.com> * Write st.bottom API page as manual docs like st.sidebar. Replace Autofunction with prose on chat input pinning, sticky footer, and main-area-only usage. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Johannes Rieke <johannes.rieke@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent a9e05b9 commit 0fcf67c

6 files changed

Lines changed: 104 additions & 0 deletions

File tree

content/develop/api-reference/_index.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1610,6 +1610,19 @@ st.sidebar.write("This lives in the sidebar")
16101610
st.sidebar.button("Click me!")
16111611
```
16121612

1613+
</RefCard>
1614+
<RefCard href="/develop/api-reference/layout/st.bottom">
1615+
1616+
<Image pure alt="screenshot" src="/images/api/bottom.jpg" />
1617+
1618+
<h4>Bottom</h4>
1619+
1620+
Display items at the bottom of the window.
1621+
1622+
```python
1623+
st.bottom.chat_input("Say something")
1624+
```
1625+
16131626
</RefCard>
16141627
<RefCard href="/develop/api-reference/layout/st.space">
16151628

content/develop/api-reference/layout/_index.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,19 @@ st.sidebar.write("This lives in the sidebar")
116116
st.sidebar.button("Click me!")
117117
```
118118

119+
</RefCard>
120+
<RefCard href="/develop/api-reference/layout/st.bottom">
121+
122+
<Image pure alt="screenshot" src="/images/api/bottom.jpg" />
123+
124+
<h4>Bottom</h4>
125+
126+
Display items at the bottom of the window.
127+
128+
```python
129+
st.bottom.chat_input("Say something")
130+
```
131+
119132
</RefCard>
120133
<RefCard href="/develop/api-reference/layout/st.space">
121134

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: st.bottom
3+
slug: /develop/api-reference/layout/st.bottom
4+
description: st.bottom inserts a pinned container at the bottom of the app, perfect for chat inputs, toolbars, and persistent controls.
5+
keywords: st.bottom, bottom, pinned container, sticky footer, chat input, toolbar, persistent controls, streamlit bottom
6+
---
7+
8+
## st.bottom
9+
10+
`st.bottom` is a layout container pinned to the bottom of the main app area. Use it for chat inputs, toolbars, footers, and other controls that should stay visible while users scroll through your app content.
11+
12+
Elements can be passed to `st.bottom` using object notation and `with` notation.
13+
14+
The following two snippets are equivalent:
15+
16+
```python
17+
# Object notation
18+
st.bottom.[element_name]
19+
```
20+
21+
```python
22+
# "with" notation
23+
with st.bottom:
24+
st.[element_name]
25+
```
26+
27+
<Important>
28+
29+
`st.bottom` is only available in the **main app area**. Using it inside [`st.sidebar`](/develop/api-reference/layout/st.sidebar), [`st.dialog`](/develop/api-reference/execution-flow/st.dialog), or event containers (such as [`st.toast`](/develop/api-reference/status/st.toast)) raises an error.
30+
31+
</Important>
32+
33+
## Keep chat input at the bottom
34+
35+
[`st.chat_input`](/develop/api-reference/chat/st.chat_input) behaves differently depending on where you call it in your script. At the **base level** of your app (the main area, not inside another container), the chat input appears at the bottom of the app automatically.
36+
37+
If you call `st.chat_input` **inside a container**, it renders **inline** in that container instead. For example, `st.expander("Settings").chat_input(...)` places the input inside the expander, not at the bottom of the viewport.
38+
39+
Use `st.bottom` to force the chat input to the bottom in those cases:
40+
41+
```python
42+
import streamlit as st
43+
44+
tab_chat, tab_logs = st.tabs(["Chat", "Logs"])
45+
46+
with tab_chat:
47+
st.write("Chat history goes here.")
48+
st.bottom.chat_input("Ask a question")
49+
50+
with tab_logs:
51+
st.write("Log output goes here.")
52+
```
53+
54+
## Add a sticky footer
55+
56+
Use `st.bottom` for footers, toolbars, or status bars that should remain visible at the bottom of the viewport:
57+
58+
```python
59+
import streamlit as st
60+
61+
st.title("Dashboard")
62+
st.line_chart({"sales": [10, 20, 15, 30, 25]})
63+
64+
with st.bottom:
65+
st.caption("© 2026 My Company · All rights reserved")
66+
```

content/develop/quick-references/api-cheat-sheet.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,16 @@ with st.sidebar:
182182

183183
<CodeTile>
184184

185+
#### Add elements to bottom
186+
187+
```python hideHeader
188+
st.bottom.chat_input("Say something")
189+
```
190+
191+
</CodeTile>
192+
193+
<CodeTile>
194+
185195
#### Columns
186196

187197
```python hideHeader

content/menu.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,8 @@ site_menu:
398398
url: /develop/api-reference/layout/st.popover
399399
- category: Develop / API reference / Layouts and containers / st.sidebar
400400
url: /develop/api-reference/layout/st.sidebar
401+
- category: Develop / API reference / Layouts and containers / st.bottom
402+
url: /develop/api-reference/layout/st.bottom
401403
- category: Develop / API reference / Layouts and containers / st.space
402404
url: /develop/api-reference/layout/st.space
403405
- category: Develop / API reference / Layouts and containers / st.tabs

public/images/api/bottom.jpg

119 KB
Loading

0 commit comments

Comments
 (0)