DEV Community

Cover image for Streamlit Part 10: Page Navigation Simplified
James
James

Posted on

1

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (1)

Collapse
 
tom_thecooldudecruse_9 profile image
Tom “TheCoolDude” Cruse

A tutorial that explains some detail i have been missing in setting up page navigation, Thanks

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay