Why there is no way to improve the looks of the sidebar with a multipage app?

[eurojourney]

Hello,

I am posting something that I’ve already seen it posted before but I still don’t have a clear idea of what the current answer to this question really is. I am new to Streamlit, it is quite amazing how quickly you can put together a web app with it, however, in terms of looks, there are clear limitations. One in particular I found is trying to make the sidebar look better when using a multipage app, at least as good as the st.sidebar() component. Is there a way to do this with the latest version of Streamlit, or the only way to work with multipage is to simply accept that the sidebar cannot hold any company logo, a simple form or titles for that matter, but rather just the links to the pages? Any chance this can look closer to the look and feel of the st.sidebar() componet, which is considerably better? Please let me know. Thank you.

Before clicking “Create Topic”, please make sure your post includes the following information (otherwise, the post will be locked).

1. Are you running your app locally or is it deployed?
2. If your app is deployed:
   a. Is it deployed on Community Cloud or another hosting platform?
   b. Share the link to the public deployed app.
3. Share the link to your app’s public GitHub repository (including a requirements file).
4. Share the full text of the error message (not a screenshot).
5. Share the Streamlit and Python versions.

[ferdy]

Welcome to the forum. At the top-right part of this page, there is a search button. You can use it to get more information about your concerns.

[Goyo]

I don’t understand what sidebar you are talking about. As far as I know there is only one sidebar and it can hold titles and images in addition to the navigation menu.

[eurojourney]

As I understand it, the default sidebar that results from using st.multipage() does not have the same level of customization as the sidebar you get from executing st.sidebar(). Why? that’s my question… if you want to add anything to the sidebar, it goes below the links to the pages generated from keeping your page .py files in te ‘pages’ folder. Thus, if you want to add a logo image, it will go below the links for the pages in the pages folder… this is not an ideal look… hence, I have decided to just create .py files with a single main function and call this function in my main.py files as a substitute to the multipage() functionality and keep the st.sidebar() component, which allows more customization… but again, if I am missing something, please let me know… I am new to Streamlit.

[eurojourney]

Thanks, I did search around for answers before posting… however, I am still not sure about how much I can do in terms of customization with the default sidebar that’s created when st.multipage() is executed…

[dataprofessor]

Hi @eurojourney

As @Goyo had pointed out, the sidebar can hold elements like title, header, subheader, any of the input widgets (sliders, selectbox, etc.), images, etc. In a multipage app, the navigation buttons are automatically generated from the pages/ folder and presented in the sidebar.

Do you have a sketch or mockup design that you have in mind for your sidebar that you’d like to achieve and based on that, the community could provide additional ideas.

[Goyo]

They are exactly the same except that one have the pages navigation menu and the other one doesn’t have it.

The navigation menu is always at the top of the sidebar. If you don’t like having it there you can hide it and create your own instead.

@eurojourney

I have decided to just create .py files with a single main function and call this function in my main.py files as a substitute to the multipage() functionality

That is also what I do and it might be the best option for you.

[ferdy]

@eurojourney

I am still not sure about how much I can do in terms of customization with the default sidebar that’s created when st.multipage() is executed…

For the logo you can check this thread.

One option is to use external lib streamlit-extras.

"""Page with logo in the sidebar.

Logo dependency:
    pip install streamlit-extras
"""

import streamlit as st
from streamlit_extras.app_logo import add_logo

# image has 200x200 pixels size
add_logo("./assets/images/logo.png", height=200)