Streamlit Part Page Navigation Simplified

In Streamlit, navigation between pages is a powerful feature for building dynamic multi-page applications. This tutorial will explore page navigation in Streamlit, using the new st.navigation, st.page_link and st.switch_page methods to create a seamless user experience.

---

Why choose multi-page application?

Streamlit was not originally built as a multi-page application framework. However, as it evolved, the Streamlit team introduced features to support multi-page applications. These features simplify navigation and provide customizable options for dynamic web applications.

---

Project structure settings

In this tutorial, our project structure follows the following layout:

<code>project/
│
├── app.py  # 主应用程序文件
├── app_pages/
│   ├── intro.py
│   ├── navigation_intro.py
│   ├── page_link_demo.py
│   ├── switch_page_demo.py
</code>

app_pagesEach file in the directory represents an individual page in the application.

---

Implement navigation: app.py

Let’s start by defining the page in app.py. This file uses st.navigation to set up the navigation menu.

<code class="language-python"># app.py
import streamlit as st

# 页面导航
pages = [
    st.Page("app_pages/intro.py", title="简介", icon="?"),
    st.Page("app_pages/navigation_intro.py", title="st.navigation", icon="?"),
    st.Page("app_pages/page_link_demo.py", title="st.page_link", icon="?"),
    st.Page("app_pages/switch_page_demo.py", title="st.switch_page", icon="?"),
]

# 将页面添加到侧边栏导航
pg = st.navigation(pages, position="sidebar", expanded=True)

# 运行应用程序
pg.run()
</code>

With this setting, the sidebar navigation will be automatically generated to display the specified page and its icon.

---

Page 1: Introduction

intro.py file is used as the home page.

<code class="language-python"># app_pages/intro.py
import streamlit as st

def intro():
    st.title("Streamlit 页面导航教程")
    st.write("欢迎来到本Streamlit页面导航教程！")
    st.write("使用侧边栏在不同页面之间导航。")

if __name__ == "__page__":
    intro()
</code>

When users visit this page, they will see an introduction to the application and instructions on how to navigate.

---

Page 2: Learn about st.navigation

The

navigation_intro.py document explains how to use st.navigation.

<code class="language-python"># app_pages/navigation_intro.py
import streamlit as st

def navigation_intro():
    st.title("st.navigation简介")
    st.write("`st.navigation`函数配置多页面Streamlit应用程序。")
    st.code("""
pages = [
    st.Page("app_pages/intro.py", title="简介", icon="?"),
    st.Page("app_pages/page1.py", title="页面1", icon="1️⃣"),
    st.Page("app_pages/page2.py", title="页面2", icon="2️⃣"),
]

pg = st.navigation(pages)
pg.run()
    """, language="python")
    st.write("这将创建一个侧边栏菜单，其中包含`pages`列表中指定的页面。")

if __name__ == "__page__":
    navigation_intro()
</code>

---

Page 3: Use st.page_link

The page_link_demo.py file demonstrates links between internal and external pages.

<code class="language-python"># app_pages/page_link_demo.py
import streamlit as st

def page_link():
    st.title("使用st.page_link")
    st.page_link("app_pages/intro.py", label="跳转到简介", icon="?")
    st.page_link("app_pages/page_link_demo.py", label="刷新本页", icon="?")
    st.page_link("https://www.streamlit.io/", label="访问Streamlit", icon="?")

if __name__ == "__page__":
    page_link()
</code>

This method allows users to navigate within the application or jump to external resources.

---

Page 4: Programmatic navigation using st.switch_page

switch_page_demo.pyDocument demonstrating switching pages programmatically.

<code class="language-python"># app_pages/switch_page_demo.py
import streamlit as st

def switch_page():
    st.title("使用st.switch_page")
    st.write("`st.switch_page`允许您以编程方式切换页面。")
    st.code("""
if st.button("跳转到简介"):
    st.switch_page("app_pages/intro.py")
    """, language="python")
    if st.button("跳转到简介"):
        st.switch_page("app_pages/intro.py")

if __name__ == "__page__":
    switch_page()
</code>

This method decouples navigation from the sidebar, providing more control over when and how users switch pages.

---

Conclusion

Streamlit’s navigation features make it easy to build user-friendly multi-page applications. Using st.navigation, st.page_link, and st.switch_page, you can create an intuitive and dynamic navigation experience.

---

? Get the code: GitHub - jamesbmour/blog_tutorials
?Related Streamlit tutorial: JustCodeIt
?Support my work: Buy Me a Coffee

The above is the detailed content of Streamlit Part Page Navigation Simplified. For more information, please follow other related articles on the PHP Chinese website!