CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-streamlit

A faster way to build and share data apps

Overview
Eval results
Files

navigation-pages.mddocs/

Navigation and Pages

Multi-page application support, navigation controls, and execution flow management. Streamlit provides comprehensive tools for building sophisticated multi-page applications with navigation, routing, and execution control.

Capabilities

Page Configuration

Configure page-level settings and metadata for your Streamlit application.

def set_page_config(page_title=None, page_icon=None, layout="centered", initial_sidebar_state="auto", menu_items=None):
    """
    Configure page settings and metadata. Must be called at the very beginning of the script.

    Args:
        page_title (str, optional): Page title shown in browser tab
        page_icon (str, optional): Page icon (emoji or URL) shown in browser tab
        layout (str): Page layout ("centered" or "wide")
        initial_sidebar_state (str): Initial sidebar state ("auto", "expanded", "collapsed")
        menu_items (dict, optional): Custom menu items configuration

    Note:
        Must be the first Streamlit command in your script
    """

Example usage:

st.set_page_config(
    page_title="My Dashboard",
    page_icon="📊",
    layout="wide",
    initial_sidebar_state="expanded",
    menu_items={
        "About": "This is my awesome dashboard!",
        "Report a bug": "mailto:support@example.com",
        "Get help": "https://docs.streamlit.io"
    }
)

Multi-Page Navigation

Create and manage multi-page applications with structured navigation.

def navigation(pages, *, position="sidebar", expanded=True):
    """
    Define application navigation structure with multiple pages.

    Args:
        pages (list): List of Page objects or page configurations
        position (str): Navigation position ("sidebar" or "hidden")
        expanded (bool): Whether navigation starts expanded

    Returns:
        Page: Currently selected page object
    """

class Page:
    """
    Represents a single page in a multi-page application.

    Args:
        page (str or callable): Page file path or function
        title (str, optional): Page title for navigation
        icon (str, optional): Page icon (emoji or material icon name)
        url_path (str, optional): Custom URL path for the page
        default (bool): Whether this is the default page
    """

    def __init__(self, page, *, title=None, icon=None, url_path=None, default=False):
        pass

Example usage:

# Define pages
home_page = st.Page("pages/home.py", title="Home", icon="🏠", default=True)
data_page = st.Page("pages/data.py", title="Data Analysis", icon="📊")
settings_page = st.Page("pages/settings.py", title="Settings", icon="⚙️")

# Create navigation
pg = st.navigation([home_page, data_page, settings_page])

# Run the selected page
pg.run()

# Advanced navigation with sections
pg = st.navigation({
    "Main": [
        st.Page("home.py", title="Dashboard", icon="📈"),
        st.Page("reports.py", title="Reports", icon="📋")
    ],
    "Admin": [
        st.Page("users.py", title="User Management", icon="👥"),
        st.Page("settings.py", title="System Settings", icon="⚙️")
    ]
})

App Logo and Branding

Configure application logo and branding elements.

def logo(image, *, link=None, icon_image=None):
    """
    Set the application logo displayed in the navigation area.

    Args:
        image (str or bytes): Logo image file path, URL, or image data
        link (str, optional): URL to navigate when logo is clicked
        icon_image (str or bytes, optional): Smaller icon version for mobile/compact view
    """

Example usage:

# Set logo with link
st.logo("assets/company_logo.png", link="https://company.com")

# Logo with separate icon
st.logo(
    image="assets/logo_full.png",
    icon_image="assets/logo_icon.png",
    link="https://company.com"
)

Page Navigation Control

Functions for programmatically controlling page navigation and routing.

def switch_page(page):
    """
    Navigate to a different page programmatically.

    Args:
        page (str or Page): Page name, file path, or Page object to navigate to
    """

Example usage:

# Navigate based on user action
if st.button("Go to Data Analysis"):
    st.switch_page("pages/data.py")

# Navigate based on conditions
if not user_authenticated:
    st.switch_page("pages/login.py")

# Navigate with Page object
if st.button("Go to Settings"):
    st.switch_page(settings_page)

# Conditional navigation
user_role = get_user_role()
if user_role == "admin":
    st.switch_page("pages/admin.py")
elif user_role == "user":
    st.switch_page("pages/dashboard.py")

Execution Control

Control the execution flow of your Streamlit application.

def rerun():
    """
    Immediately rerun the current script from the top.

    Useful for refreshing the app state or triggering updates.
    """

def stop():
    """
    Stop execution of the current script.

    Nothing after this command will be executed in the current run.
    """

Example usage:

# Rerun after data update
if st.button("Refresh Data"):
    update_data()
    st.rerun()

# Stop execution based on condition
if not user_has_permission:
    st.error("Access denied")
    st.stop()

# Conditional execution
if data_needs_refresh():
    refresh_data()
    st.rerun()

# Stop with message
if not config_valid:
    st.error("Invalid configuration. Please check settings.")
    st.stop()

# The rest of the app continues here
st.write("Application content...")

Multi-Page Application Patterns

File-Based Pages

# main.py - Entry point
import streamlit as st

# Page configuration
st.set_page_config(
    page_title="Analytics Platform",
    page_icon="📊",
    layout="wide"
)

# Define pages
pages = [
    st.Page("pages/dashboard.py", title="Dashboard", icon="📈", default=True),
    st.Page("pages/data_upload.py", title="Data Upload", icon="📤"),
    st.Page("pages/analysis.py", title="Analysis", icon="🔍"),
    st.Page("pages/reports.py", title="Reports", icon="📋"),
    st.Page("pages/settings.py", title="Settings", icon="⚙️")
]

# Navigation
pg = st.navigation(pages)
pg.run()

Function-Based Pages

def home_page():
    st.title("Welcome to My App")
    st.write("This is the home page")

    if st.button("Go to Data"):
        st.switch_page(data_page)

def data_page():
    st.title("Data Analysis")
    st.write("Analyze your data here")

    # Data analysis code
    if st.button("Generate Report"):
        st.switch_page(report_page)

def report_page():
    st.title("Reports")
    st.write("View generated reports")

# Create pages
home = st.Page(home_page, title="Home", icon="🏠")
data = st.Page(data_page, title="Data", icon="📊")
report = st.Page(report_page, title="Reports", icon="📋")

# Navigation
pg = st.navigation([home, data, report])
pg.run()

Conditional Navigation

# Authentication-based navigation
def get_navigation():
    if not st.session_state.get("authenticated", False):
        return st.navigation([
            st.Page("login.py", title="Login", icon="🔐")
        ])

    user_role = st.session_state.get("user_role", "user")

    if user_role == "admin":
        return st.navigation({
            "Main": [
                st.Page("dashboard.py", title="Dashboard", icon="📊"),
                st.Page("analytics.py", title="Analytics", icon="📈")
            ],
            "Admin": [
                st.Page("users.py", title="User Management", icon="👥"),
                st.Page("system.py", title="System Settings", icon="⚙️")
            ]
        })
    else:
        return st.navigation([
            st.Page("dashboard.py", title="Dashboard", icon="📊"),
            st.Page("profile.py", title="My Profile", icon="👤")
        ])

# Use conditional navigation
pg = get_navigation()
pg.run()

URL-Based Routing

# Custom URL routing with query parameters
def handle_routing():
    # Get page from URL
    page = st.query_params.get("page", "home")

    # Route to appropriate function
    if page == "home":
        show_home()
    elif page == "data":
        show_data_page()
    elif page == "settings":
        show_settings()
    else:
        show_404()

def navigate_to(page_name):
    """Navigate to page and update URL."""
    st.query_params["page"] = page_name
    st.rerun()

# Navigation menu
col1, col2, col3 = st.columns(3)
with col1:
    if st.button("Home"):
        navigate_to("home")
with col2:
    if st.button("Data"):
        navigate_to("data")
with col3:
    if st.button("Settings"):
        navigate_to("settings")

# Handle the routing
handle_routing()

State-Aware Navigation

# Navigation that responds to application state
def get_current_page():
    # Determine page based on app state
    if "current_workflow" not in st.session_state:
        return "welcome"

    workflow_state = st.session_state.current_workflow

    if workflow_state == "data_loaded":
        return "analysis"
    elif workflow_state == "analysis_complete":
        return "results"
    else:
        return "data_upload"

def update_workflow_state(new_state):
    """Update workflow state and navigate."""
    st.session_state.current_workflow = new_state
    st.rerun()

# State-based page display
current_page = get_current_page()

if current_page == "welcome":
    st.title("Welcome")
    if st.button("Start Analysis"):
        update_workflow_state("ready")

elif current_page == "data_upload":
    st.title("Upload Data")
    uploaded_file = st.file_uploader("Choose file")
    if uploaded_file and st.button("Process"):
        # Process file
        update_workflow_state("data_loaded")

elif current_page == "analysis":
    st.title("Analysis")
    if st.button("Run Analysis"):
        # Run analysis
        update_workflow_state("analysis_complete")

elif current_page == "results":
    st.title("Results")
    st.write("Analysis complete!")

Navigation with Session State

# Initialize navigation state
if "nav_history" not in st.session_state:
    st.session_state.nav_history = ["home"]
    st.session_state.current_page = "home"

def navigate_with_history(page):
    """Navigate to page and maintain history."""
    st.session_state.nav_history.append(page)
    st.session_state.current_page = page
    st.rerun()

def go_back():
    """Navigate back to previous page."""
    if len(st.session_state.nav_history) > 1:
        st.session_state.nav_history.pop()
        st.session_state.current_page = st.session_state.nav_history[-1]
        st.rerun()

# Navigation controls
col1, col2 = st.columns([1, 4])
with col1:
    if len(st.session_state.nav_history) > 1:
        if st.button("← Back"):
            go_back()

# Page content based on current page
current_page = st.session_state.current_page

if current_page == "home":
    st.title("Home")
    if st.button("Go to Settings"):
        navigate_with_history("settings")

elif current_page == "settings":
    st.title("Settings")
    if st.button("Go to Profile"):
        navigate_with_history("profile")

Install with Tessl CLI

npx tessl i tessl/pypi-streamlit

docs

advanced-features.md

caching-performance.md

components-config.md

display-elements.md

index.md

input-widgets.md

layout-containers.md

navigation-pages.md

state-management.md

user-auth.md

tile.json