How to Build a Streamlit Multipage App in Python

Table of Contents

• Installing the Latest Version of Streamlit
• Creating the First Page and Configuring Basic Settings
• Adding Additional Pages
• Sharing Data Between Pages with Session State
• Limitations and Alternatives
• Conclusion

Installing the Latest Version of Streamlit to Create Multi Page Apps

Hey guys! In this blog post, I will show you how to build a Streamlit multi-page app like the one you see on the screen. This feature was added with Streamlit 1.10, and in this quick tutorial, I will show you how to use it.

Ok, and without further ado, let us get started. First things first, you want to make sure to use the latest version of Streamlit. Therefore, open up your terminal or command prompt, type "pip install streamlit --upgrade", and press enter. Once we have that out of the way, I will open up a blank Python file. In my case, I have named this file "Homepage.py".

Upgrading Streamlit with Pip

Upgrading Streamlit to the latest version with pip is crucial for being able to use the newer multi-page functionality. By running "pip install streamlit --upgrade", you ensure that you have the most up-to-date release of Streamlit which supports multiple pages in one app.

Creating the First Page and Configuring Basic Settings

As the first step, I will import Streamlit as st. Then, I will create a very simple Streamlit app. For this, I am going to set up some basic page configurations, like a page title and icon. After that, I will insert a title and a success message in the sidebar.

Ok, and before going further, let me run our Streamlit app. So, back in my terminal, I will type 'streamlit run' followed by the name of the Python file. After pressing enter, Streamlit will start our app. To see any changes better, let me place my text editor and browser next to each other.

Adding Additional Pages

To add now another page, all you need to do is to create a new folder in the app directory and name it 'pages'. Within this folder, you can now create additional Python files. For example, I will create a new file called "Projects.py". As soon as I hit enter and create this file, you will notice that our sidebar has changed. We can now see our two pages.

In the "Projects.py" file, I will just import Streamlit as st and insert a title. When I save the script and navigate to the Projects page, we can see our title. However, you will also notice that the initial page title and icon disappeared. So, the "page config settings" are only valid for the respective page and are not shared between the pages.

Creating New Python Files for Each Page

To add a new page to your Streamlit multi-page app, simply create a new .py file in the pages folder, import Streamlit, and add your page content. Each .py file will become its own page.

Customizing Page Order and Icons

You can customize the order in which pages appear in the sidebar menu by renaming the .py files and prepending a number. Pages will be sorted alphabetically based on the filenames. You can also add emojis to use as icons by adding them to the start of the filename.

Sharing Data Between Pages with Session State

At the beginning of this video, I told you that the page configurations are not shared across the different pages. Yet, Streamlit allows you to access the session state from other pages, which can be super useful. Let me show you an example.

First, I will check if the name "my_input" is not in the current session state. If that is the case, I will assign an empty string to this variable. Then, I will insert a text input field, using the session state variable "my_input" as the default value. Additionally, I will insert a submit button. If that button gets clicked, I will update our session state variable with the text from the input field. And to make it more transparent, I will also display that text on our web app.

Ok, and with that in place, let me save the script and refresh our website. If I now type something in our input field and hit the submit button, it will be displayed on our website. So far, so good. But the cool thing is that I can access this value also on my other pages. So, let me navigate to the projects file and use the Streamlit write element to display our value, which is stored in the session state variable "my_input". When I navigate to "Projects", we can see our input here. And just to validate it one more time, I will go back to my homepage, add some exclamation marks, and click the submit button again. If I now go back to the Projects page, we can see the updated value.

Limitations and Alternatives

I guess some of you still have some open questions. Like what about nested pages, further customization options or displaying the navigation menu on the main page instead of the sidebar. Well, at this point, there are not many other customization options. I assume the Streamlit developer team will add more features over time. But until then, you might also want to check out some community packages, like the Streamlit-Option-Menu, which you can also use to add a navigation menu to your Streamlit app.

Lack of Nesting and Customization Options

The multi-page functionality in Streamlit is still fairly basic. There is no support yet for nested pages or extensive customization of the sidebar menu and icons. The development team will likely add more advanced options over time.

Using the Streamlit-Option-Menu Package

For now, if you need more customization, you can check out community packages like Streamlit-Option-Menu. This lets you add custom navigation menus directly into your Streamlit pages rather than just using the sidebar.

Conclusion

Ok, guys, and that is all for this tutorial. As always, thanks for reading and see you in the next post!

FAQ

Q: How do I install the latest version of Streamlit?
A: Open your terminal or command prompt and run 'pip install streamlit --upgrade' to upgrade to the newest Streamlit version.

Q: How do I create additional pages in Streamlit?
A: Make a new folder called 'pages' and add new Python files representing each page. Streamlit will automatically detect these pages.

Q: Can I reorder the pages in a Streamlit multipage app?
A: Yes, rename the page Python files with a number prefix to control the order. For example '1_contact.py' and '2_projects.py'.

Q: How do I share data between Streamlit pages?
A: Use Session State to store data that can be accessed across pages. For example, store user input in a session state variable.

Q: What are the limitations of Streamlit multipage apps?
A: As of Streamlit 1.10, there is little ability to nest pages or customize the navigation menu. But community packages like Streamlit-Option-Menu add more flexibility.

Q: Can I show the menu on the main page instead of the sidebar?
A: Not by default, but the Streamlit-Option-Menu package allows you to render the menu on the page itself.

Q: How do I customize the icons next to each page?
A: Rename the Python files with an emoji prefix after the index number. For example '1_💬_contact.py'.

Q: Do page configurations carry over between pages?
A: No, settings like page title and icon are confined to each individual page .py file.

Q: Can I create nested multipage hierarchies?
A: Unfortunately nested pages are not yet supported in Streamlit as of version 1.10.

Q: Where can I learn more about Streamlit multipage functionality?
A: Check the Streamlit documentation, join the community forum, or watch video tutorials covering new Streamlit features and packages.