dev-resources.site
for different kinds of informations.
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
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()
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()
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()
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()
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()
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
Featured ones: