Multipage app with icons but without adding them as part of the page name

🎈 Using Streamlit
1

Summary

I really like the new multipage functionality in streamlit… but I cannot avoid being repulsed by the method used to add a icon to each app/section.
Adding and emoji to the file name simply to be able to add an icon to the page seems at best a ugly hack.

Surely there must be a more elegant way to do this, for example

Why not make a requirement for every page in a multipage app (the python files within the pages folder) to have a st.set_page_config element

and in that element add an option for a page icon

for example:

st.set_page_config(page_title=“my app page 1”,
layout=“wide”,
initial_sidebar_state=“auto”,
multi_app_icon=🎨
)

the adding of numbers just for ordeing the pages is also very hackish
Surely we could just and a ranking/order value to this section as well:

st.set_page_config(page_title=“my app page 1”,
layout=“wide”,
initial_sidebar_state=“auto”,
multi_app_icon=🎨,
ordering=1
)

st.set_page_config(page_title=“my app page 2”,
layout=“wide”,
initial_sidebar_state=“auto”,
multi_app_icon=🎭,
ordering=2
)

1 Like
2

If this is technicaly difficult because you would need to read in each app first before drawing the UI then it would be better to make the definition of the multipage app on the main app itself

for example create a multipage app element that can take in 1 or more args where each arg is a multipage_config element

each multipage_config element contains all the metadata you need to include
and the multiapp element is responsible for drawing the UI as well as maybe even allow the return data for that element be a link we can add in the main page content:

i.e.:
in main.py:

page1_conf = st.multipage_config(page_title=“my app page 1”,
layout=“wide”,
initial_sidebar_state=“auto”,
multi_app_icon=🎨,
ordering=1
)

page2_conf = st.multipage_config(page_title=“my app page 2”,
layout=“wide”,
initial_sidebar_state=“auto”,
multi_app_icon=🎭,
ordering=2

links = st.multiapp(page1_conf , page2_conf )

where links is a dict of links to each link
this way you can refer to them on the main app , for example:

st.write(f’{links[“my app page 1”] does this thing}‘)
st.write(f’{links[“my app page 2”] does this other thing}')

3

The Streamlit team is considering different ways to improve this behavior, and make it easier to customize the appearance of the multipage sidebar without the need to change the filenames. In the meantime, you might try out GitHub - blackary/st_pages: An experimental version of Streamlit Multi-Page Apps, which I created for exactly this purpose.

4 Likes
4

Great… that is exactly what i was looking for.

Thank you

1 Like
5

beautiful! great work! I was exactly looking for it.