building-streamlit-multipage-apps

Organize Streamlit projects into multi-page apps with st.navigation routing.

629|85|Updated May 4, 2020
One-click install
npx skills add https://github.com/andfanilo/streamlit-echarts --skill building-streamlit-multipage-apps-andfanilo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-streamlit-multipage-apps
Source: https://github.com/andfanilo/streamlit-echarts/tree/main/.claude/skills/developing-with-streamlit/skills/building-streamlit-multipage-apps
Command: npx skills add https://github.com/andfanilo/streamlit-echarts --skill building-streamlit-multipage-apps-andfanilo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlit apps with multiple pages often lack a scalable structure and consistent navigation. This skill provides patterns to organize pages under an app_pages directory, share global state, and implement a reliable navigation flow.

Core Features & Use Cases

  • Multi-page app scaffolding with an app_pages directory and a main entrypoint
  • Centralized navigation using st.navigation for top or sidebar menus
  • Shared global state across pages via st.session_state
  • Page modules and programmatic navigation for dynamic routing
  • Useful for dashboards, admin panels, and apps with modular features

Quick Start

Create a simple multi-page Streamlit app using an app_pages directory, a main entrypoint that configures navigation with st.navigation, and per-page Python modules

Frequently Asked Questions about building-streamlit-multipage-apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a multi-page Streamlit app with shared state?

Structure a multi-page Streamlit app by organizing page modules under an app_pages directory and initializing global state in a main entrypoint. Use st.session_state to share global variables across pages and ensure deterministic loading for consistent navigation.

How does st.navigation work for routing in Streamlit multipage apps?

st.navigation provides centralized routing for Streamlit multipage apps by configuring top or sidebar menus. It enables programmatic navigation between page modules in the app_pages directory, allowing dynamic routing and reliable transitions across pages like Home, Analytics, and Settings.

What's the best way to organize pages in a Streamlit multipage project?

Organize Streamlit multipage projects by placing individual page modules inside an app_pages directory. Use a main module to initialize global state and configure the navigation structure with st.navigation, ensuring modular features like dashboards and admin panels load deterministically.

Can I use st.navigation for dynamic routing in a Streamlit app?

Yes, st.navigation supports programmatic page navigation for dynamic routing in Streamlit apps. Combined with st.session_state for global state management, it enables dynamic page selection and reliable transitions between modular features in your multipage application.

Why does my Streamlit multipage app lose session state across pages?

Streamlit multipage apps lose state when global variables are not properly shared via st.session_state. Initialize shared state in a main entrypoint module and access it consistently across all page modules in the app_pages directory to maintain state continuity during navigation.

Does this Streamlit multipage pattern work for admin panels and dashboards?

Yes, this Streamlit multipage pattern works well for admin panels and dashboards. The app_pages directory structure, combined with st.navigation menus and st.session_state for shared global state, provides the modular features and reliable navigation these applications require.