How to beautify pages seen in navbar when using multipage feature

Custom Components
1

Hello all, I’m new to Streamlit and have recently started exploring multi-page apps. I had started with “streamlit-option-menu” and have moved on to the native “mulitpage apps”.

Even though the native feature is great, I kinda miss the look and feel that the option-menu brought. So, is there a way to style the multipages seen on the nav bar and make it look more like an option-menu, or maybe add my own CSS?
Screen Shot 2022-09-03 at 11.26.53 AM
Screen Shot 2022-09-03 at 11.26.41 AM

4 Likes
2

Search for this too, the only reaso wan’t use multipage from streamlit is the UI

1 Like
3

I’m a Streamlit newbie as well. I agree that the native multipage look and feel on the sidebar could do with some love. I will be using native multipage as it allows code to be organised better - my application UI will be quite big. If the Streamlit team read this, could I please second the wish for some styling options for mutlipages.

Icons (not emojis please!) will make it look more professional, and variable padding between the list of files as a bonus. Ideally an optional, thin rounded border as well as an accent colour for the background to differentiate it from the sidebar colour.

I do like the simple way of adding pages via a naming convention!

Thanks.

4

It’s not an ideal solution, because you may notice a small delay after the page loads before the changes actually happen, but you can adjust the margin and padding with some css like this

st.markdown(
    """
    <style>

    div[data-testid="stSidebarNav"] li div a {
        margin-left: 1rem;
        padding: 1rem;
        width: 300px;
        border-radius: 0.5rem;
    }
    div[data-testid="stSidebarNav"] li div::focus-visible {
        background-color: rgba(151, 166, 195, 0.15);
    }
    </style>
    """,
    unsafe_allow_html=True,
)
5

Thanks for this. I did have a look at the generated HTML and noticed a few IDs and what looked to me like dynamically generated CSS classes, so was unsure what would be “sticky” enough to have a go at targeting via st.markdown. Anyway, it would take me time to figure out the structure of the Streamlit HTML.

So thanks for showing me that the “stSidebarNav” is a static ID and your solution looks like a great start. I will go and try this out.

Cheers.

6

Trying the code worked, but in a multipage app switching pages caused the side nav bar to move as you pointed out. By removing the positioning attributes this cleared that issue. My first attempt is close but no cigar! I’ll keep learning as I go.

st.markdown("""
    <style>
    div[data-testid="stSidebarNav"] {
        border-radius: 0.5rem;
        border: 1px solid lightgrey;
        background-color: rgba(151, 250, 195, 0.15);
    }
    </style>
    """, unsafe_allow_html=True)

Giving this result;

Screenshot 2022-09-08 at 16.26.01

Thanks.

7

Note that, if you use this solution, you will need to add the styling to every page in your multipage app. I would recommend making a function that adds this css, and then importing and calling that function from within every page.

8

Sure, I did have the styling on each page. Unfortunately, with the padding/margin code it was too janky for use. The repositioning of the elements was clearly visible (I have everything running locally on a fast machine).

Cheers.