Streamlit Part 10: Page Navigation Simplified

Streamlit 101 (9 Part Series)

1 Streamlit Part 1: Write and Text Elements
2 Streamlit Part 2: Mastering Data Elements for Interactive Dashboards
… 5 more parts…
3 Streamlit Part 3: Mastering Input Widgets
4 Streamlit Part 4: Mastering Media Elements – Logos, Images, Videos, and Audio
5 Streamlit Part 5: Mastering Data Visualization and Chart Types
6 Streamlit Part 6: Mastering Layouts
7 Streamlit Part 7: Build a Chat Interface
8 Streamlit Part 8: Status Elements
9 Streamlit Part 10: Page Navigation Simplified

Navigating between pages in Streamlit is a powerful feature for building dynamic, multi-page applications. In this tutorial, we’ll 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 Multi-Page Apps?

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

Setting Up the Project Structure

For this tutorial, our project structure follows this layout:

project/
│
├── app.py  # Main app file
├── app_pages/
│   ├── intro.py
│   ├── navigation_intro.py
│   ├── page_link_demo.py
│   ├── switch_page_demo.py

Enter fullscreen mode Exit fullscreen mode

Each file in the app_pages directory represents a separate page in the application.

Implementing Navigation: app.py

Let’s start by defining our pages in app.py. This file sets up the navigation menu using st.navigation.

# app.py import streamlit as st

# Page Navigation pages = [
    st.Page("app_pages/intro.py", title="Introduction", 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=""),
]

# Adding pages to the sidebar navigation pg = st.navigation(pages, position="sidebar", expanded=True)

# Running the app pg.run()

Enter fullscreen mode Exit fullscreen mode

With this setup, the sidebar navigation is automatically generated, displaying the specified pages with their icons.

Page 1: Introduction

The intro.py file serves as the homepage.

# app_pages/intro.py import streamlit as st

def intro():
    st.title("Streamlit Page Navigation Tutorial")
    st.write("Welcome to this tutorial on Streamlit page navigation!")
    st.write("Use the sidebar to navigate between different pages.")

if __name__ == "__page__":
    intro()

Enter fullscreen mode Exit fullscreen mode

When users visit this page, they’ll see an introduction to the app and instructions on how to navigate.

Page 2: Understanding st.navigation

The navigation_intro.py file explains how to use st.navigation.

# app_pages/navigation_intro.py import streamlit as st

def navigation_intro():
    st.title("Introduction to st.navigation")
    st.write("The `st.navigation` function configures multi-page Streamlit apps.")
    st.code(""" pages = [ st.Page("app_pages/intro.py", title="Introduction", icon=""), st.Page("app_pages/page1.py", title="Page 1", icon="1️⃣"), st.Page("app_pages/page2.py", title="Page 2", icon="2️⃣"), ] pg = st.navigation(pages) pg.run() """, language="python")
    st.write("This creates a sidebar menu with pages specified in the `pages` list.")

if __name__ == "__page__":
    navigation_intro()

Enter fullscreen mode Exit fullscreen mode

Page 3: Using st.page_link

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

# app_pages/page_link_demo.py import streamlit as st

def page_link():
    st.title("Using st.page_link")
    st.page_link("app_pages/intro.py", label="Go to Intro", icon="")
    st.page_link("app_pages/page_link_demo.py", label="Refresh This Page", icon="")
    st.page_link("https://www.streamlit.io/", label="Visit Streamlit", icon="")

if __name__ == "__page__":
    page_link()

Enter fullscreen mode Exit fullscreen mode

This approach allows users to navigate within the app or to external resources.

Page 4: Programmatic Navigation with st.switch_page

The switch_page_demo.py file showcases programmatically switching pages.

# app_pages/switch_page_demo.py import streamlit as st

def switch_page():
    st.title("Using st.switch_page")
    st.write("`st.switch_page` allows you to programmatically switch pages.")
    st.code(""" if st.button("Go to Intro"): st.switch_page("app_pages/intro.py") """, language="python")
    if st.button("Go to Intro"):
        st.switch_page("app_pages/intro.py")

if __name__ == "__page__":
    switch_page()

Enter fullscreen mode Exit fullscreen mode

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

Conclusion

Streamlit’s navigation features make it easy to build user-friendly multi-page apps. With st.navigation, st.page_link, and st.switch_page, you can create intuitive and dynamic navigation experiences.

Get the Code: GitHub – jamesbmour/blog_tutorials
Related Streamlit Tutorials:JustCodeIt
Support my work: Buy Me a Coffee

Streamlit 101 (9 Part Series)

1 Streamlit Part 1: Write and Text Elements
2 Streamlit Part 2: Mastering Data Elements for Interactive Dashboards
… 5 more parts…
3 Streamlit Part 3: Mastering Input Widgets
4 Streamlit Part 4: Mastering Media Elements – Logos, Images, Videos, and Audio
5 Streamlit Part 5: Mastering Data Visualization and Chart Types
6 Streamlit Part 6: Mastering Layouts
7 Streamlit Part 7: Build a Chat Interface
8 Streamlit Part 8: Status Elements
9 Streamlit Part 10: Page Navigation Simplified

原文链接：Streamlit Part 10: Page Navigation Simplified