How to change the location of multipage buttons?

🎈 Using Streamlit
1

Summary

I have a multipage Streamlit app, but would like the page buttons to appear at the bottom of the left-hand navigation bar (underneath the text) rather than the top. Is there any way to do this?

2

This will need a bit more styling to make it robust for tall content (either in navigation or user-generated sidebar).

css='''
[data-testid="stSidebarNav"] {
    position:absolute;
    bottom: 0;
}
'''

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
3

Thanks for the reply. The buttons are now at the bottom but they are overlapping with the navigation bar text and they are no longer clickable.

4

Yeah, that’s what I meant about it not being robust for tall content. Here’s a little bit more of the work to make it functional with both navigation and user-generated sidebar content being very tall. It still has some odd artifacts that can be further beautified and I haven’t tested it across many different browser/devices/aspect ratios. I might tweak it a bit more later, but I’m a bit tired at the moment. Hopefully this gives you a some direction on where to go:

import streamlit as st

for letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ':
    st.sidebar.button(letter)

# If you have a theme specified, you can get the color through get_option
# color = st.get_option('theme.secondaryBackgroundColor')

# Correct color for dark mode
color = '#262730'

css=f'''
[data-testid="stSidebarNav"] {{
    position:absolute;
    bottom: 0;
    z-index: 1;
    background: {color};
}}
[data-testid="stSidebarNav"] > ul {{
    padding-top: 2rem;
}}
[data-testid="stSidebarNav"] > div {{
    position:absolute;
    top: 0;
}}
[data-testid="stSidebarNav"] > div > svg {{
    transform: rotate(180deg) !important;
}}
[data-testid="stSidebarNav"] + div {{
    overflow: scroll;
    max-height: 66vh;
}}
'''

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.