Create a Multi-Page App with the New Streamlit-Option-Menu Component

Still Use st.radio() to Create Menus? Time to Try Streamlit-Option-Menu with Complete Code Provided in Github

Introduction

Streamlit-option-menu is a new custom Streamlit component that allows users to toggle between options in a menu. Its functionality looks the same as Streamlit’s native st.selectbox() or st.radio() widget, but it is more aesthetically appealing and customizable with CSS styles. If you are still using st.radio() to create the navigation bar or menu for your app, it’s time to try this new component and see if it makes your app look nicer!

In this post, we’ll create a few simple apps and use streamlit-option-menu to show them all in one app. For each individual app, I have written a separate article about how to create it step-by-step. I’ll include links to those articles if you want to learn how each of the apps was created in detail. We will mainly be focused on how to use and customize the streamlit-option-menu component in this post.

Pre-requisite

To use the streamlit-option-menu component, you will need to first install it using the following command:

pip install streamlit-option-menu

Import All the Libraries

Add Option Menu to Sidebar

Let’s add a navigation menu to the sidebar using the option_menu function. Within the function, we need to specify a few parameters:

• menu_title (required): This is the title of the menu (‘App Gallery’). We can also hide the title by passing None to this parameter.
• options (required): This is the list of options to be displayed in the menu.
• default_index (optional): This parameter determines the default option to be selected in the menu. The default is 0, which is the first item in the options list.
• menu_icon and icons(optional): These are the names of the bootstrap-icons for the menu title and options in the menu. You can look up the names of the icons from bootstrap’s website.

• orientation (optional): We can choose to display the menu vertically or horizontally using this parameter. The default is ‘vertical’.
• styles (optional): This parameter allows you to customize the look and feel of the menu by adjusting the title size, icon color, icon font size, background color, etc.

Create App Pages

We’ll create a separate app page for each option in the menu. We use if-elif statements to link each app page to the corresponding option in the menu.

The ‘About’ Page:

In the ‘About’ page, we can display a page title and brand logo, side-by-side using st.columns() method. Then we show a simple introductory paragraph about the app creator and a screenshot of the app creator’s medium profile page.

The ‘Photo Editing’ Page:

On this page, we will display a simple photo-editing app to convert an image to a pencil sketch. To learn how to create a photo editing app in detail, please refer to the article below.

The ‘Project Planning’ Page:

On this page, we will display a simple project planning app to allow users to upload a project plan file and generate a Gantt chart instantly. To learn how to create this app in detail, please refer to the article below.

The ‘Python e-Course’ Page:

On this page, we will show a sample page of an interactive e-tutorial. You can read the following article to learn more about this app.

The ‘Contact’ Page:

Finally, let’s add a contact page to our app. We can use st.text_input() and st.form() to create a contact form.

There you go! We have created a multi-page Streamlit app using streamlit-option-menu. You can also go to my Github page and look at the entire code for this app.

Thanks for reading! I hope you enjoyed this article and are ready to use streamlit-option-menu to create your own multi-page app soon!

Image and Data Sources:

1. The baby photo used in the ‘photo editing’ app can be downloaded from Pixabay. It is free for commercial use (No attribution required).
2. The ‘my_project_plan.csv’ file used in the ‘project planning’ app was created by the author.

You can unlock full access to my writing and the rest of Medium by signing up for Medium membership ($5 per month) through this referral link. By signing up through this link, I will receive a portion of your membership fee at no additional cost to you. Thank you!